When you need this conversion
Reading someone else’s CSS, checking a component library, or matching a design in Figma: em values only make sense once you know the pixel size they resolve to. Multiply by the font size they’re measured against.
Where em comes from
For font-size, em uses the parent element’s font size. For padding, margins, borders and widths, em uses the element’s own font size. Both are resolved to pixels before the browser draws anything.
Useful values with a 16 px base:
- 0.5 em = 8 px
- 0.75 em = 12 px
- 1.25 em = 20 px
- 2 em = 32 px
Compounding
If a 1.25em element sits inside another 1.25em element, the inner one is 1.25 × 1.25 = 1.5625 times the outer base. With a 16 px start that’s 25 px, not 20 px. When a design looks bigger than expected, nested em values are the usual cause.
Common mistakes
Using the root size instead of the parent. rem uses the root; em uses the parent. If the parent has its own font size, use that.
Forgetting padding uses the element’s own size. A button with font-size: 14px; padding: 1em has 14 px padding, not 16.
To go the other way, use pixels to em.