16 px = 1 em at 16px base
Settings
Controls how many digits after the dot can be typed and shown in the live conversion result.
Conversion Table
Popular px to em conversions at your selected base font size.
| Pixels (px) | EM (em) | ||
|---|---|---|---|
| 1 px | 0.0625 em | ||
| 2 px | 0.125 em | ||
| 3 px | 0.1875 em | ||
| 4 px | 0.25 em | ||
| 5 px | 0.3125 em | ||
| 6 px | 0.375 em | ||
| 8 px | 0.5 em | ||
| 10 px | 0.625 em | ||
| 12 px | 0.75 em | ||
| 14 px | 0.875 em | ||
| 15 px | 0.9375 em | ||
| 16 px | 1 em | ||
| 18 px | 1.125 em | ||
| 20 px | 1.25 em | ||
| 24 px | 1.5 em | ||
| 25 px | 1.5625 em | ||
| 28 px | 1.75 em | ||
| 32 px | 2 em | ||
| 36 px | 2.25 em | ||
| 40 px | 2.5 em | ||
| 44 px | 2.75 em | ||
| 48 px | 3 em | ||
| 50 px | 3.125 em | ||
| 56 px | 3.5 em | ||
| 64 px | 4 em | ||
| 72 px | 4.5 em | ||
| 75 px | 4.6875 em | ||
| 80 px | 5 em | ||
| 90 px | 5.625 em | ||
| 100 px | 6.25 em | ||
Shortcuts
Hot keys
PX to EM Converter
Convert pixels to em units using your project's font size as the base. At 16px, 16px equals 1em. Use the base font size setting above to match your component context.
How to Convert PX to EM
Divide the pixel value by the font size of the parent element (or root if unset). At 16px: em = px ÷ 16. Enter a px value above to get the em equivalent. Swap the units to convert em back to px.
Conversion Formula
em = px / context font size. If the parent element has font-size: 20px, then 30px = 1.5em in that context. This calculator uses the base font size you set, which should match the relevant parent font size in your stylesheet.
EM vs REM
EM is relative to its parent's font size, while rem is always relative to the root. Nested elements with em sizes compound: an element at 1.2em inside a container at 1.2em renders at 1.44× the root. REM avoids this compounding and is generally more predictable for layout.
When to Use EM
EM is ideal for component-internal sizing — padding and margins that should grow when a component's text is larger, or media queries using em for better zoom behavior. Use rem when you want predictable, root-relative sizing across components.
Common PX to EM Values
At 16px base: 10px = 0.625em, 12px = 0.75em, 14px = 0.875em, 16px = 1em, 20px = 1.25em, 24px = 1.5em, 32px = 2em. Change the base setting above if your context differs.