px ⇄ rem converter

What it's for

Modern CSS often uses rem and em instead of pixels for scalable, accessible layouts. This tool does the conversion instantly, so you don't have to work it out in your head.

16 px base

By default 1 rem = 16 px (the browser's default text size). If you changed the root font-size, edit the base to get the right value.

rem and em: the difference that costs

They look like two names for the same thing and they aren't. The rem is always relative to the document root, so 1.5rem is the same size anywhere on the page. The em is relative to the parent, and so it compounds: an element at 1.2em inside another at 1.2em ends up 1.44 times as large, and at three levels of nesting 1.73. It's why a list inside a list, or a menu inside a box, comes out with text growing without anyone asking for it.

The practical rule that nearly always holds: rem for text sizes and page spacing, em only where you genuinely want a measure to follow the element's own text — a button's padding, for instance, which then stays in proportion at any size you give it.

Why pixels aren't used for text

It isn't purism: it's that anyone needing larger type changes the default text size in their browser settings, and text written in px doesn't move by a pixel. With rem, the whole page grows together and keeps its layout. It's one of the few CSS choices with a direct effect on people with poor eyesight, and it's also why the accessibility guidelines ask for it.

For borders, shadows and thin lines pixels are perfectly fine: there the size shouldn't follow the text, and a 1px border is exactly what you want.

The 62.5% trick, and why it's better dropped

For years people wrote html { font-size: 62.5% } so that 1rem was 10px and the sums could be done in the head. It works, but it has two flaws: anyone reading that CSS without knowing about the trick finds every measure wrong, and above all the base text becomes 10px for anything without a more specific rule. With a page like this one there's no need to do the sums in your head, so the base can stay as it naturally is.

One detail that surprises people: in media queries the rem doesn't look at the font-size you set on the root, but always at the browser's default. A @media (min-width: 40rem) is 640px even if you set 62.5%.

Nearby tools

For CSS colours there is Colour converter, for shadows Box-shadow generator and for rounded corners Border-radius generator. If the CSS needs slimming before publishing, the page is Minify CSS.