PX to REM Converter

How to use PX to REM Converter

1. Set the root font size — 16px unless you have deliberately changed it.
2. Enter a pixel value to get rem, or a rem value to get pixels.
3. Use the batch field to convert a whole spacing scale in one go.
4. The browser default root is 16px; 1rem is 16px, 1.5rem is 24px, 0.75rem is 12px.
5. rem ignores the font size of ancestor elements; em does not, and compounds when nested.
6. Media queries are not affected by the root font size, so em and rem behave identically there.

Why rem matters more than it looks

A rem is relative to the root font size, which the browser sets to 16px by default and the user can change in their browser settings. Someone who has set their default to 20px because they find 16 hard to read gets your whole interface scaled up if you sized it in rem, and gets nothing at all if you sized it in px. That setting is the main accessibility control browsers expose for text, and px silently overrides it. Zoom still works either way, but zoom scales everything including layout; the font-size preference is the one that just makes text bigger.

rem, em and the compounding trap

rem is always relative to the root. em is relative to the current element’s font size, so it compounds: a list item at 0.9em inside a list at 0.9em inside a section at 0.9em is 0.729 of the base, and nested menus shrink to nothing. Use rem for font sizes and spacing so values stay predictable, and reserve em for things that should scale with their own element — padding inside a button that should grow with the button’s text, or a letter-spacing value.

Keep 16 as the root, and divide by it

There was a fashion for setting html { font-size: 62.5% } to make the root 10px so 1.6rem means 16px. It makes the arithmetic easier and breaks the accessibility benefit for anyone who has changed their default, because you have overridden their setting with a percentage of it. Leave the root alone and divide by 16: 24px is 1.5rem, 12px is 0.75rem, 32px is 2rem. Most spacing scales are multiples of 4 or 8, which divide cleanly.

What should stay in pixels

Not everything benefits from scaling. Hairline borders look wrong at 0.0625rem and should stay 1px. Media query breakpoints are conventionally written in px or em, and em breakpoints behave differently from rem ones because media queries ignore the root element entirely. Shadow offsets, tiny radii and anything that is a visual detail rather than a measure of text can stay in px without harming anyone.