Convert rem to pixels at any base font size

Rem turns into pixels with a single multiplication: the value in rem times the base font size. At the browser default that base is 16px, so 1rem is 16 pixels and 1.5rem is 24. The unit refers to the text size of the html element, the root of the document – hence the name, root em[1].

The conversion helps when you work from a mock-up. The designer hands over pixel measurements, the stylesheet stores them in rem, and you want one number to check whether a 1.875rem heading really is the 30 pixels from the design.

The base does not have to be 16px. The 62.5% technique sets it to 10px, and a reader can raise it in their own browser settings, which is why the base font-size field accepts anything from 1 to 100.

Below you will find a table of 26 values at three bases, the full Tailwind CSS type scale, and an explanation of why 16 is only a default. The journey the other way is handled by the pixels to rem converter.

The formula holds one operation: pixels = rem × base font size. The base font size is the text size set on the html element, and if nobody has changed it the browser uses 16px.

Take a 1.25rem spacing value: at a 16px base it comes to 1.25 × 16 = 20 pixels. The same value at a 10px base gives 12.5 pixels, and for a reader who set 20px in their browser it grows to 25.

The 62.5% technique means writing html { font-size: 62.5% }, which yields a 10px base, because 62.5% of 16 is exactly 10. The arithmetic then happens in your head: 2.4rem is 24 pixels. One condition comes with it – body text needs a readable size back, for example 1.6rem, which gives 16 pixels, or the whole page ends up set in ten-pixel type.

The em unit works the same way but refers to the parent rather than the root of the document – that calculation is done by the em to pixels converter. Those same 16 pixels are 12 typographic points in typesetting, which the points to pixels converter handles.

The figure 16 does not come from the CSS specification. It is the default text size a browser gives a document, and the reader can change it in their own settings. A reader with weaker eyesight can set 20 or 24px there and expects the page to follow.

That is the whole difference between rem and the pixel. An element written as font-size: 24px stays 24 pixels tall whatever the reader chose. The same element written as 1.5rem grows with the base: at 20px it gives 30 pixels, at 24px it gives 36.

Success criterion WCAG 1.4.4 requires text to be resizable up to 200% without loss of content or functionality[2]. A layout built on rem scales with the reader’s text-size setting across the entire interface at once.

Hence the practical split: put type sizes, spacing and column widths in rem, and keep the pixel where a measurement should stay fixed regardless of text – borders, shadows and hairlines.