Pixel, REM & EM Converter
Convert between CSS px, rem, and em units given a root font-size (for rem) and a parent font-size (for em) — and see all three side by side to understand how rem and em diverge.
Input
The <html> element's font-size. rem is always relative to this single, page-wide value.
The immediate parent element's font-size. em is relative to this — it changes at every nesting level, unlike rem.
Output
| Unit | Value |
|---|---|
| No data yet | |
Guides
What does this tool convert?
Enter a value in pixels (px), rem, or em, along with a root font-size and a parent font-size, and this tool instantly shows the equivalent value in all three units side by side. It's built for CSS work — sizing type, spacing, borders, and media-query breakpoints — where px, rem, and em are used interchangeably but don't behave the same way.
rem vs em: the distinction that trips people up
Both rem and em are relative units, but they're relative to different things:
- rem ("root em") is always relative to the font-size of the root
<html>element — one single, page-wide value. If the root font-size is 16px,1remis 16px everywhere on the page, no matter how deeply nested the element is. - em is relative to the font-size of the element's immediate parent (or, for the
font-sizeproperty itself, the inherited size). If a parent hasfont-size: 20px,1eminside it is 20px — but that same1emmeans something else entirely inside a parent withfont-size: 24px.
This is why em values compound: nest a few elements that each set font-size in em, and the effective pixel size multiplies at every level. rem never compounds, because it always looks straight past the parent chain to the root. That's why rem became the default choice for font sizing in most modern CSS, while em is still useful for spacing that should scale with its own element's font size (like padding that grows with the text inside a button).
How the conversion works
- px → rem =
px ÷ root font-size - px → em =
px ÷ parent font-size - rem → px =
rem × root font-size - em → px =
em × parent font-size
The default root and parent font-size is 16px, matching every browser's default <html> font-size. Change the parent font-size to see how the same px value produces a different em result depending on context — while the rem result stays fixed.
How to use it
- Enter a value and pick its unit (px, rem, or em).
- Set the root font-size — the
<html>element's font-size on your page (default 16px). - Set the parent font-size — the font-size of the element whose em value you're computing against (default: same as root).
- Read the equivalent px, rem, and em values from the table.
Who is it for?
- Front-end developers converting a design spec's pixel values into rem for accessible, zoom-friendly CSS.
- Designers and developers debugging why a nested em-based size looks wrong — usually because a parent's font-size changed the em's effective pixel value.
- Anyone auditing a stylesheet that mixes px, rem, and em and needs a quick sanity check on what a given value actually renders as.
Privacy
All conversion happens locally in your browser (and identically via the API) — no values are stored or transmitted anywhere.