Pixels to rem

Pixels to rem and back, at your real root size, not just the assumed 16.

24px ÷ 16 = 1.5rem (16px root size)

The same value in every unit

  • points

    18pt

    24px ÷ 1.3333 = 18pt (96 px per inch ÷ 72)

  • inches

    0.25in

    24px ÷ 96 = 0.25in (96 px per inch)

  • centimetres

    0.635cm

    24px ÷ 37.7953 = 0.635cm (96 px per inch ÷ 2.54)

  • millimetres

    6.35mm

    24px ÷ 3.7795 = 6.35mm (96 px per inch ÷ 25.4)

  • picas

    1.5pc

    24px ÷ 16 = 1.5pc (96 px per inch ÷ 6)

In short

Divide pixels by the root font size to get rem: at the browser default of 16px, 24px is 1.5rem and 14px is 0.875rem. To go back, multiply rem by the root size. If your site sets the root to 62.5%, the root is 10px and 24px becomes 2.4rem.

The formula

rem = px ÷ root
px = rem × root
root = 16px unless html { font-size } says otherwise

Reference tables

Computed by the same code as the converter above.

Pixels to rem
pixelsRoot 16px (default)Root 10px (62.5%)
1px0.0625rem0.1rem
2px0.125rem0.2rem
4px0.25rem0.4rem
8px0.5rem0.8rem
10px0.625rem1rem
12px0.75rem1.2rem
14px0.875rem1.4rem
16px1rem1.6rem
18px1.125rem1.8rem
20px1.25rem2rem
24px1.5rem2.4rem
28px1.75rem2.8rem
32px2rem3.2rem
40px2.5rem4rem
48px3rem4.8rem
64px4rem6.4rem
Rem to pixels
remRoot 16pxRoot 18px
0.125rem2px2.25px
0.25rem4px4.5px
0.5rem8px9px
0.75rem12px13.5px
0.875rem14px15.75px
1rem16px18px
1.125rem18px20.25px
1.25rem20px22.5px
1.5rem24px27px
2rem32px36px
2.5rem40px45px
3rem48px54px
4rem64px72px

The 16 is an assumption, and that is the point of rem

A rem is the root element's font size. Browsers set it to 16px, and visitors can change it in their settings: Evan Minto measured 3.08% of visitors to the Internet Archive with a default other than 16px. Type set in rem grows for them; type set in px does not. WCAG 1.4.4 asks that text can be resized to 200%, and rem is the cheapest way to honour the setting rather than fight it.

So a px-to-rem conversion is not really a change of value. 24px and 1.5rem are identical for the 97% on the default, and the rem version is correct for everyone else. That is why this tool asks for your root size instead of hard-coding 16: if your stylesheet sets html { font-size: 18px }, every conversion should use 18.

The 62.5% pattern sets the root to 62.5% of the visitor's default, which is 10px at 16, so that 2.4rem reads as 24px. It still scales with the setting, because it is a percentage. Its cost is that every element inherits a 10px base unless the body resets it, and a missed reset ships 10px text.

Worked examples

Real sizes, with the sums.

Converting a spacing scale

You give it

4, 8, 12, 16, 24, 32 and 48px at a 16px root.

You get

0.25, 0.5, 0.75, 1, 1.5, 2 and 3rem. Every step lands on a short decimal because each is a multiple of 4px.

A site with html { font-size: 62.5% }

You give it

14px body text.

You get

14 ÷ 10 = 1.4rem. At the default 16px root the same 14px would be 0.875rem; using the wrong root gives 22.4px (60% too big) one way and 8.75px (37.5% too small) the other.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

How many pixels is 1rem?

As many as the root font size: 16px by default in every major browser, or more for a visitor who has increased their default text size.

Should I use rem or px for font sizes?

Rem, for text. It follows the visitor's font-size preference and px does not. Borders and hairlines are fine in px, because they should stay thin when text grows.

What is the difference between rem and em?

Rem is always relative to the root, so it means the same thing everywhere on the page. Em is relative to the element's own font size, so it compounds when nested. See the px to em converter for that.

Other unit conversions