PX to REM Converter (Pixels to REM)

Pixels to REM

Pixels (px) to rem (rem) at any root font size. Browsers default to 16 px.

Value

Convert to

1.5rem

Root font size (px, for rem)

Precision (significant figures)

Formula

rem = px ÷ root size

1 px = 0.0625 rem with a 16 px root font size

Px to rem chart

Values in rem for common root font sizes. Browsers default to 16 px.

Pixels (px)	14 pxrem, 14 px root	16 pxrem, 16 px root	18 pxrem, 18 px root	20 pxrem, 20 px root
1	0.0714286	0.0625	0.0555556	0.05
2	0.142857	0.125	0.111111	0.1
4	0.285714	0.25	0.222222	0.2
8	0.571429	0.5	0.444444	0.4
10	0.714286	0.625	0.555556	0.5
12	0.857143	0.75	0.666667	0.6
14	1	0.875	0.777778	0.7
16	1.14286	1	0.888889	0.8
18	1.28571	1.125	1	0.9
20	1.42857	1.25	1.11111	1
24	1.71429	1.5	1.33333	1.2
28	2	1.75	1.55556	1.4
32	2.28571	2	1.77778	1.6
40	2.85714	2.5	2.22222	2
48	3.42857	3	2.66667	2.4
64	4.57143	4	3.55556	3.2

When you need this conversion

Design files hand you sizes in pixels: a 24 px heading, 14 px captions, 32 px spacing. Modern CSS writes them in rem so the whole interface scales with the reader’s font setting. Converting keeps your implementation pixel-accurate at the default size and accessible at every other size.

Choosing the root size

16 px is the default in Chrome, Safari, Firefox and Edge. If your CSS never sets a font size on html, use this.
10 px if you use the 62.5% trick. The math gets easy (divide by 10), but remember to set a readable body size, for example body { font-size: 1.6rem }.
Your own base if you set html { font-size: 18px } or similar. A fixed px value on html stops user settings from applying, so prefer a percentage.

Useful values at a 16 px root

12 px = 0.75 rem, 14 px = 0.875 rem, 18 px = 1.125 rem
20 px = 1.25 rem, 24 px = 1.5 rem, 32 px = 2 rem, 48 px = 3 rem

Common mistakes

Setting a fixed px size on html. html { font-size: 16px } looks harmless but overrides the user’s browser preference. Use 100% (or leave it alone) instead.

Using rem for borders. A 1 px border becomes 0.0625 rem and can round to 0 or 2 device pixels at some zoom levels. Hairlines are one of the few places px is still the better choice.

Going the other way? Use the rem to pixels converter.

Questions

How many rem is 16 px?

1 rem with the default 16 px root. With a 10 px root (html { font-size: 62.5% }) it would be 1.6 rem.

Why use rem instead of px?

rem scales with the user's browser font-size setting. People who set a larger default font get larger text and spacing everywhere you used rem; px ignores that preference.

What is the 62.5% trick?

Setting html { font-size: 62.5% } makes the root 10 px (62.5% of 16), so 24 px becomes a tidy 2.4 rem. It still respects user settings because it is a percentage.

What's the difference between rem and em?

rem is relative to the root (html) font size, so it is the same everywhere on the page. em is relative to the parent element's font size, so it compounds when elements are nested.