PX to REM converter

Designs arrive in pixels and accessible CSS wants rem, so you end up doing the same small division about forty times a day. That’s all this is.

The rule

rem stands for “root em”. It’s always measured against the font size of the <html> element, however deeply nested the thing using it happens to be. The browser default is 16px, which gives you:

rem = px ÷ 16
px  = rem × 16

So 16px is 1rem, 24px is 1.5rem, 8px is 0.5rem. There isn’t more to it than that.

Why bother when px is simpler

Someone who has bumped their browser’s default text size up gets nothing from a layout built in pixels. Their setting changes the root font size. Anything in rem moves with it, anything in px sits there ignoring them.

That’s the whole argument for it, and I think it’s enough on its own. It costs you one division and it means the site respects a preference somebody set deliberately, often because they need it.

Use rem for font sizes, spacing and container widths. Pixels are still right for things that genuinely shouldn’t scale: hairline borders, a 1px rule, the odd shadow offset.

The 62.5% trick, and where it bites

You’ll run into this one a lot:

html {
  font-size: 62.5%; /* 16 × 0.625 = 10px */
}

1rem is now 10px, 24px becomes 2.4rem, and the mental arithmetic goes away.

What people miss is that this changes the root size for everything on the page. Any third-party CSS that assumed 16px is now rendering at 62.5% scale. Embedded widgets, checkout iframes and plugin styles are the usual casualties, and it’s never obvious that your html rule is the cause.

The safer version puts the body back where it was:

html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* back to 16px for actual text */

Set the basis field above to 10 if you work this way and the converter will follow.

Against em

rem looks at the root and never compounds. em looks at the parent and does, so three nested elements at 0.9em land you at 0.73 of where you started. The px to em converter covers that case properly.

Roughly: rem for layout, em for anything that ought to scale with its own context. Padding inside a button that should grow when the button’s text does is the classic example.

Two things that catch people out

Media queries ignore your html font size. Rems in a @media rule always resolve against the browser default, which is spec behaviour rather than a bug, and it means the 62.5% trick leaves your breakpoints exactly where they were. This surprises almost everyone the first time.

And you don’t need to convert a whole codebase in one pass. Do font sizes first, since that’s where the accessibility win actually lives. Spacing can wait until you’re next in that file anyway.