EM to PX
Convert em values to pixels.
Convert EM (em) to Pixels (px). Results update as you type.
em
Browser default is 16px
em to px conversion table (base 16px)
| EM | Pixels |
|---|---|
| 0.25em | 4px |
| 0.5em | 8px |
| 0.75em | 12px |
| 0.875em | 14px |
| 1em | 16px |
| 1.125em | 18px |
| 1.25em | 20px |
| 1.5em | 24px |
| 1.75em | 28px |
| 2em | 32px |
| 2.5em | 40px |
| 3em | 48px |
| 4em | 64px |
EM to PX Converter
Work out the real pixel size of an em value. Because em depends on context, you need two numbers: the em value and the font size it is relative to. Enter both and the pixel size appears instantly. Paste a list of em values into the bulk box to convert them all against the same base.
Formula
px = em × parent font size
For font-size, the reference is the parent's font size. For other properties such as padding, margin, or width, the reference is the element's own computed font size.
| EM | 14px base | 16px base | 18px base |
|---|---|---|---|
| 0.75em | 10.5px | 12px | 13.5px |
| 1em | 14px | 16px | 18px |
| 1.5em | 21px | 24px | 27px |
| 2em | 28px | 32px | 36px |
Worked example: nested components
An article sets its text to 1.125em inside a 16px body, so the article text is 18px. A blockquote inside it uses font-size: 0.9em, and the quote's citation uses font-size: 0.8em. Convert step by step:
- Article: 1.125 × 16 = 18px
- Blockquote: 0.9 × 18 = 16.2px
- Citation: 0.8 × 16.2 = 12.96px
The final number shows why deeply nested em sizes can end up smaller than intended, and running the chain through a converter makes such problems easy to spot.
Padding in em
A button with font-size: 14px and padding: 0.75em 1.5em has 10.5px vertical and 21px horizontal padding, because padding in em uses the button's own font size. Enter 14 as the base to check it.
Related
To turn pixel measurements back into em, use PX to EM. If you need values that ignore nesting, compare with REM to PX.
Frequently Asked Questions
How do I convert em to px?
Multiply the em value by the font size of the parent element (or the element itself for properties other than font-size). With a 16px parent, 1.5em = 24px.
How do I calculate nested em values?
Convert level by level. Use the outer pixel size as the base for the first em value, then use that result as the base for the next one. For example, 1.25em inside 16px gives 20px, and 0.9em inside that gives 18px.
Why does my em value render at a different size than expected?
The parent font size is probably not what you assumed. Check the computed font-size in your browser's developer tools and enter that number as the base.