PX to REM Converter

How to use it

1. Type sizes into Values, separated by spaces or commas. Each needs a unit, px, rem, em, pt or %, in any case.
2. Set Root font size (px), the size 1rem stands for. It starts at 16, the default in every major browser.

The table gives each value in px, rem, em, pt and %, and each row’s copy button copies all five, as 24px 1.5rem 1.5em 18pt 150%. Below it, Common sizes at root 16px lists 8 to 72 px at your root.

Examples

The starting values, 16px 1.5rem 12pt 150%, at root 16:

Value   px  rem  em   pt  %
16px    16  1    1    12  100
1.5rem  24  1.5  1.5  18  150
12pt    16  1    1    12  100
150%    24  1.5  1.5  18  150

12pt is 16px because CSS fixes 1pt at 4/3 px, and 150% reads as a font size: half again the root.

The 62.5% setup, 24px, 14px, 1px at root 10:

Value  px  rem  em   pt    %
24px   24  2.4  2.4  18    240
14px   14  1.4  1.4  10.5  140
1px    1   0.1  0.1  0.75  10

html { font-size: 62.5% } makes the root 10px at the browser default, so the conversion is a division by ten.

15px at root 18 gives 0.8333rem. Results stop at four decimals, so converting 0.8333rem back gives 14.9994px, not 15.

A pasted declaration, margin: 16px, is rejected at the property name: "margin:" isn't a value I know. Use a number with px, rem, em, pt or %, like 24px. A bare 16 gets "16" needs a unit. Add px, rem, em, pt or %, like 16px.

Good to know

• rem follows the root font size, the font-size on html, or the browser default when none is set. A user who raises the default in browser settings gets bigger rem text, while px text stays put; zoom scales both.
• em is converted at the same root. In CSS, em in font-size is relative to the parent’s font size, so nested em sizes compound. For an element under a parent of another size, enter that size as the root and read the em column.
• % is read as a font-size percentage. A percentage width or margin is relative to the containing block instead.
• Media queries ignore your root. An em or rem in @media is based on the browser’s initial font size, so 48em is 768px at the default even with the 62.5% setup.
• One run takes up to 500 values and 20,000 characters, and the root can be 1 to 1000 px. calc(), vw and exponents like 1e2px aren’t read.

Questions

How do I convert px to rem?

Divide by the root font size: at 16px, 24px is 24 / 16 = 1.5rem. In Sass, math.div(24px, 16px) * 1rem does the same; in plain CSS, calc(24rem / 16).

How do I convert rem to px?

Multiply by the root font size: 1.5rem × 16 = 24px. In the browser, parseFloat(getComputedStyle(document.documentElement).fontSize) gives the root size the page actually uses.

What’s the difference between rem and em?

rem always refers to the root element’s font size, while em refers to the current one, which is inherited from the parent. rem is predictable anywhere; em suits padding or icons that should scale with their own text.

Should I use px or rem for font sizes?

Use rem, so text follows the default size each user sets; px ignores that setting. Keep px for things that shouldn’t grow with text, such as 1px borders.