CSS units

PX to REM Converter

Convert CSS pixels to rem with your own root font size. With the common 16 px browser default, rem = px ÷ 16, so 24 px = 1.5 rem.

16 px = 1 rem · 24 px = 1.5 rem · 32 px = 2 rem

At a 16 px root. Change the root font size below if your design uses another value.

Convert with your own references

Your CSS references

Updates as you type

CSS value

Zero and negative lengths are supported; valid CSS properties have their own limits.

Convert from

CSS units describe layout, not image pixels.

Convert to

The result also includes equivalents in all six units.

Root font size CSS px

Use the root element’s computed font size. For rem in the root’s own font-size, use its initial font size instead. 16 is an editable example.

Em reference font size CSS px

For font-size, use the parent’s font size. For padding and most other lengths, use the element’s own computed font size.

Viewport width for vw CSS px

Enter the target layout viewport width. vw uses the large viewport; this is not native screen resolution.

Viewport height for vh CSS px

Enter the target large viewport height, with browser controls retracted. This tool does not calculate svh or dvh.

Use a decimal point, without commas. CSS values and references accept up to 4 decimal places.

Example result

1.5 rem

24 px · 24 CSS px

Root font: 16 px
Em reference: 16 px
Viewport: 1,440 × 900 px

Equivalent lengths at your entered references
Equivalent (px)	24
Equivalent (rem)	1.5
Equivalent (em)	1.5
Equivalent (pt)	18
Equivalent (vw)	1.666667
Equivalent (vh)	2.666667

These equivalents use your entered font and viewport sizes. They change when those references change.

For font-size in em, use the parent’s font size; for padding, use the element’s computed font size. rem uses the root font size, except on the root’s own font-size, where the initial font size is the reference.

CSS units do not measure image print PPI or the physical size of your screen. vw and vh use the large viewport; mobile browser controls can cover part of it.

Calculation details & inputs

Inputs used for this result
CSS value	24
Convert from	px — CSS pixels
Convert to	rem — root font
Root font size	16 CSS px
Em reference font size	16 CSS px
Viewport width for vw	1440 CSS px
Viewport height for vh	900 CSS px

Result details · 6 decimals or 3 significant digits for tiny values
Equivalent (px)	24
Equivalent (rem)	1.5
Equivalent (em)	1.5
Equivalent (pt)	18
Equivalent (vw)	1.666667
Equivalent (vh)	2.666667

PX to REM conversion table

Common sizes at three root font sizes. 16 px is the default in major browsers unless the user or the stylesheet changes it.

CSS pixels to rem by root font size
Pixels	rem (16 px root)	rem (10 px root)	rem (18 px root)
1 px	0.0625	0.1	0.0556
2 px	0.125	0.2	0.1111
4 px	0.25	0.4	0.2222
8 px	0.5	0.8	0.4444
10 px	0.625	1	0.5556
12 px	0.75	1.2	0.6667
14 px	0.875	1.4	0.7778
16 px	1	1.6	0.8889
18 px	1.125	1.8	1
20 px	1.25	2	1.1111
24 px	1.5	2.4	1.3333
28 px	1.75	2.8	1.5556
32 px	2	3.2	1.7778
36 px	2.25	3.6	2
40 px	2.5	4	2.2222
48 px	3	4.8	2.6667
56 px	3.5	5.6	3.1111
64 px	4	6.4	3.5556
72 px	4.5	7.2	4
96 px	6	9.6	5.3333

Why use rem instead of px?

A rem is relative to the root element’s font size. If a reader increases the browser’s default text size, rem-based type and spacing grow with it, while fixed px values do not. The conversion is only as correct as the root size you assume.

rem = px ÷ root font size (px)

Use the full CSS unit converter for em, vw and vh, which need their own reference sizes.

Questions about this conversion

How many px is 1 rem?

It equals the root font size: 16 px with the usual browser default, but 10 px if a stylesheet sets html { font-size: 62.5% } on a 16 px default.

How do I convert 14 px to rem?

14 ÷ 16 = 0.875 rem at a 16 px root.

Is rem the same as em?

No. rem always uses the root element’s font size; em uses the font size of the element itself (or of its parent for the font-size property).