Em to px formula
px = em × parent font-size Example: 0.5em × 16px = 8px
Because em values compound across nested DOM elements, 1em equals whatever font size is active on that specific container. Simply enter the container's parent font size into the base setting above to obtain the precise pixel equivalent.
Common reference points
| Em | Pixels (at 16px base) |
|---|---|
| 0.5em | 8px |
| 0.625em | 10px |
| 0.75em | 12px |
| 0.875em | 14px |
| 1em | 16px |
| 1.25em | 20px |
| 1.5em | 24px |
| 2em | 32px |
| 3em | 48px |
Frequently asked questions
How do I convert em to px?
Multiply the em value by the relevant font-size — the current element's own font-size for em, as opposed to always the root font-size for rem.
What's the difference between em and rem?
Rem always resolves against the single root (html) font-size, no matter how deeply nested the element is. Em resolves against the current element's own font-size, which can itself be set in em relative to its parent — so em can compound through several levels of nesting, while rem never does. This calculator computes em against one base font-size and can't simulate that nested compounding, since it depends on your actual page structure.
When should I use em instead of rem?
Em is useful when you specifically want a value to scale with its own local context — for example, padding that should grow proportionally with a component's own font-size, wherever that component is placed.