ConverterGo

PX to REM Converter & Calculator (16px Base)

Convert PX to REM or REM to PX instantly. Change the base font size, copy ready-to-use CSS, and reference common 16px and Tailwind values.

Conversion Calculator
Set the Base Font Size and enter a value.
The default for most browsers is 16px.

Why use REM?

Accessibility
Font sizes scale flexibly according to user settings.
Responsive Design
Control the overall scale by adjusting the root font size.
Quick Reference
1px0.0625rem
2px0.125rem
4px0.25rem
8px0.5rem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem
48px3rem
64px4rem
80px5rem
96px6rem

Why Use REM instead of PX?

For accessibility and responsive design, use relative units (REM) over fixed units (PX).
Font sizes scale flexibly with user settings.

Web Accessibility Guide

How to convert PX to REM

Divide the pixel value by the root font size. Most browsers use a 16px root font size unless the website changes it.

rem = px ÷ 16px = rem × 16

For example, 24px ÷ 16px = 1.5rem. To convert back, 1.5rem × 16px = 24px.

PX to REM conversion table

Common pixel values converted with the standard 16px base font size.

PXREM (16px)CSS
1px0.0625remfont-size: 0.0625rem;
2px0.125remfont-size: 0.125rem;
4px0.25remfont-size: 0.25rem;
8px0.5remfont-size: 0.5rem;
10px0.625remfont-size: 0.625rem;
12px0.75remfont-size: 0.75rem;
14px0.875remfont-size: 0.875rem;
16px1remfont-size: 1rem;
18px1.125remfont-size: 1.125rem;
20px1.25remfont-size: 1.25rem;
24px1.5remfont-size: 1.5rem;
32px2remfont-size: 2rem;
40px2.5remfont-size: 2.5rem;
48px3remfont-size: 3rem;
64px4remfont-size: 4rem;
80px5remfont-size: 5rem;
96px6remfont-size: 6rem;

Tailwind CSS spacing reference

Tailwind's default spacing scale commonly maps these PX and REM values to padding, margin, and gap utilities.

PXREMTailwind
4px0.25remp-1 / m-1 / gap-1
8px0.5remp-2 / m-2 / gap-2
12px0.75remp-3 / m-3 / gap-3
16px1remp-4 / m-4 / gap-4
20px1.25remp-5 / m-5 / gap-5
24px1.5remp-6 / m-6 / gap-6
32px2remp-8 / m-8 / gap-8
40px2.5remp-10 / m-10 / gap-10
48px3remp-12 / m-12 / gap-12
64px4remp-16 / m-16 / gap-16
96px6remp-24 / m-24 / gap-24

PX vs REM

PX is a fixed absolute unit, while REM is relative to the root html font size.

PX and REM FAQ

How many REM is 16px?

At the standard 16px base font size, 16px equals 1rem.

How do I convert PX to REM?

Divide the pixel value by the root font size. With a 16px base, 32px divided by 16 equals 2rem.

Should I use REM or PX in CSS?

REM is generally useful for scalable typography and spacing, while PX remains practical for fine details such as thin borders. Choose based on the design requirement.

What if my base font size is not 16px?

Enter your actual root font size in the calculator. For a 10px base, 20px equals 2rem; for a 14px base, 20px is about 1.4286rem.