By Ahsan Khowaja · Updated 27 October 2026
How to use the px to em converter
- Choose px to em, em to px, or nested em font sizes if you want to see what happens when em values stack.
- Type the pixel or em value you have.
- Type the parent font size: the computed
font-sizeof the element that contains the one you are styling. For a top-level paragraph that is normally the 16px browser default; for a span inside anh2it is whatever theh2resolves to.
That third box is what makes this a different tool from a rem converter. Rem always divides by the root (<html>) size; em divides by the parent, so the same pixel value gives different em values in different places on the page. If you want the root-relative unit instead, use the px to rem converter.
The px to em formula
An em was originally the width of a capital M in metal type; in CSS it means "the current size". For the font-size property the "current" size is the parent's, because an element can't be relative to the value it is defining (MDN: em). So:
- em = px ÷ parent font size
- px = em × parent size
Examples: 24px inside a 16px parent is 24 ÷ 16 = 1.5em. 12px inside an 18px parent is 12 ÷ 18 = 0.6667em. Going back, 1.25em in a 16px parent is 1.25 × 16 = 20px, and 0.75em in a 20px parent is 15px. Because 1em is exactly the parent size, em and percentages are interchangeable for font-size: 0.875em is the same as 87.5%.
For every property other than font-size (padding, margin, width, letter-spacing, border-radius), em refers to the element's own computed font size. A button with font-size: 1.25em; padding: 0.5em 1em inside a 16px parent has a 20px font and 10px by 20px padding, because the padding is measured against the button's own 20px, not the parent's 16px.
Em compounding: why nested em values multiply
Here is the behaviour that catches people out. If a stylesheet says li { font-size: 1.2em } and a list is nested inside another list, the inner items are 1.2em of the outer items, which were already 1.2em of their parent. Starting from 16px:
| Level | Working | Computed size |
|---|---|---|
| 1 | 1.2em × 16px | 19.2px |
| 2 | 1.2em × 19.2px | 23.04px |
| 3 | 1.2em × 23.04px | 27.65px |
Three levels deep the text is 16 × 1.2³ = 27.648px, 73% bigger than the body, even though every rule only asked for "a bit larger". The same thing happens in reverse with values below 1: small { font-size: 0.8em } nested twice gives 16 × 0.8² = 10.24px, which is below the size most people can read comfortably. The nested em mode above shows each level so you can see where a size went wrong, and the "same value in rem" row shows what you would have got with rem, which multiplies the root once and never compounds.
Px to em table at a 16px parent
| px | em | Percent | Notes |
|---|---|---|---|
| 8px | 0.5em | 50% | Half the parent |
| 10px | 0.625em | 62.5% | |
| 12px | 0.75em | 75% | Common caption size |
| 13px | 0.8125em | 81.25% | |
| 14px | 0.875em | 87.5% | Common secondary text size |
| 16px | 1em | 100% | Equal to the parent |
| 18px | 1.125em | 112.5% | |
| 20px | 1.25em | 125% | |
| 24px | 1.5em | 150% | |
| 28px | 1.75em | 175% | |
| 32px | 2em | 200% | Twice the parent |
| 48px | 3em | 300% |
The numbers are identical to a px to rem table when the parent happens to be 16px, which is exactly why the two units are so often confused. Change the parent box to 20px or 14px and every row moves; a rem table would not.
Em vs rem: which one to use
Use rem when a size should be the same wherever it appears on the page: body text, headings, the spacing scale, container widths. Use em when a size should follow the text next to it, so that one rule works at every size:
- Em for padding and margin inside components.
padding: 0.5em 1emon a button gives a small button small padding and a large button large padding, with a single rule. - Em for icons sized to the text they sit beside:
width: 1em; height: 1emkeeps an SVG icon the same height as the letters. - Em for
letter-spacingandtext-indent, which are typographic measures that should scale with the glyphs. - Rem for
font-sizeon almost everything, so that nested components don't drift in size.
Mixing them up is the usual cause of "why is this text huge inside the sidebar" bugs. If you are reading an existing stylesheet and see 0.75rem, that is 12px at the default root regardless of nesting (0.75 rem in px is always 0.75 × root); if you see 0.75em, you need to know the parent size before you can say what it is.
Em in media queries
Inside @media, em does not refer to any element's parent, because there is no element yet. It refers to the browser's initial size, 16px by default, and ignores anything your CSS sets on html. So @media (min-width: 40em) means 640px, and if the user raises their default to 20px it becomes 800px, which is the behaviour you want: a layout that switches to its narrow form when the text gets big. For the same reason, em and rem behave identically in media queries, and px breakpoints are the ones that don't follow the user's setting.
Px to em converter for font sizes in older stylesheets
Before rem had full browser support, em was the only relative unit, and many stylesheets from that era set everything in em and fought the compounding with resets such as li li { font-size: 1em }. If you are maintaining one, the nested mode of this px to em converter (online, nothing to install) is a quick way to work out what a deeply nested element actually renders at: type the em value, count the levels between the element and the nearest ancestor with a pixel size, and read the result. Converting those font sizes to rem removes the compounding without changing their appearance, as long as you convert from the computed pixel size shown in your browser's developer tools rather than from the em value in the file. For sizing images rather than text, the pixels to inches and pixels to cm converters cover physical units.
