CSS Units
- Free forever
- No sign-up
- Instant results
PX to EM Converter
Convert pixels to CSS EM units based on the parent element's font size. Enter your pixel value and parent font size and get the EM equivalent with no mental arithmetic required.
EM value
—
When would you use this?
EM is one of those CSS units that trips people up. Unlike REM which is always relative to the root, EM is relative to the font size of the parent element. That means the same EM value can render at a completely different pixel size depending on where it lives in your HTML. This calculator takes a pixel value and a parent font size, and gives you the EM equivalent. Useful for components where you want sizing to scale with the local context rather than the global root.
Common PX → EM values (16px base)
| Pixels | EM | Common use |
|---|---|---|
| 10px | 0.625em | Small labels |
| 12px | 0.75em | Caption / meta text |
| 14px | 0.875em | Secondary text |
| 16px | 1em | Default parent size |
| 18px | 1.125em | Large body / small heading |
| 20px | 1.25em | Lead text |
| 24px | 1.5em | H3 / subheadings |
| 32px | 2em | H2 |
| 40px | 2.5em | H1 / display |
| 48px | 3em | Hero headings |
| 64px | 4em | Large display type |