CSS Units
- Free forever
- No sign-up
- Instant results
EM to PX Converter
Convert a CSS EM value to pixels at any parent font size. Essential for debugging inherited font sizes and understanding exactly what's rendering on screen.
Pixel value
—
When would you use this?
Working with EM values in inherited contexts can get confusing fast. This converter lets you plug in an EM value and a parent font size to see the exact pixel output. It's particularly handy when you're debugging a component buried inside several levels of font-size inheritance and you need to know what's actually rendering on screen.
Common EM → PX values (16px base)
| EM | Pixels | Common use |
|---|---|---|
| 0.625em | 10px | Small labels |
| 0.75em | 12px | Caption / meta text |
| 0.875em | 14px | Secondary text |
| 1em | 16px | Default parent size |
| 1.125em | 18px | Large body / small heading |
| 1.25em | 20px | Lead text |
| 1.5em | 24px | H3 / subheadings |
| 2em | 32px | H2 |
| 2.5em | 40px | H1 / display |
| 3em | 48px | Hero headings |
| 4em | 64px | Large display type |