Convert em to px instantly
Use this tool to convert em values into pixels (px) based on your chosen base font size.
What is an em unit?
An em is a relative CSS unit used for sizing text, spacing, and layout elements. Unlike pixels, em values scale according to font size, which makes responsive design and accessibility easier to manage.
In short:
- px is fixed
- em is relative to font size
How the em to px formula works
The conversion formula is simple:
pixels = em × base font size
Examples:
- 1em at 16px base = 16px
- 1.5em at 16px base = 24px
- 2em at 18px base = 36px
Common em to px conversions (base 16px)
| EM | PX |
|---|---|
| 0.75em | 12px |
| 0.875em | 14px |
| 1em | 16px |
| 1.125em | 18px |
| 1.25em | 20px |
| 1.5em | 24px |
| 2em | 32px |
When should you use em in CSS?
1) Typography that scales naturally
Using em for headings, buttons, and spacing allows components to scale with text settings. This is useful for accessibility and dynamic layouts.
2) Component-level sizing
Because em is relative to the current element’s font size, it’s ideal when you want nested components to scale proportionally.
3) Accessible interfaces
Relative units help users who increase browser text size. Your interface remains readable without breaking as easily as rigid pixel-based sizing.
em vs rem vs px
- em: Relative to parent/current font size.
- rem: Relative to root (
html) font size. - px: Absolute unit; fixed size.
For predictable global scaling, many teams prefer rem for typography and em for component internals.
Practical workflow tip
If your design file uses pixels but your CSS system uses em, convert key values up front:
- Choose your base size (often 16px)
- Convert spacing and type values with this calculator
- Store common values in your design system docs
FAQ
Does 1em always equal 16px?
No. It equals the current font size. 16px is just a common default.
Can em values be decimals?
Yes. Values like 1.125em and 0.875em are very common in real-world CSS.
Can em be negative?
In specific properties like letter-spacing, negative values are valid. For font-size, negative values are not used.