How to convert pixels to ems
Divide the pixel value by the relevant element or parent font size. With a 16px context, 16px equals 1em and 24px equals 1.5em.
em = px ÷ element font sizeAt a 16px element size: em = px ÷ 16.
Convert 24 px to em
Apply the conversion rule to 24 pixels. Using the default settings, the result is 1.5 em.
Default context: element font size 16px.
px to em conversion table
These pre-calculated values use the same formula and default settings as the converter above.
| pixels (px) | ems (em) |
|---|---|
| 1 px | 0.0625 em |
| 2 px | 0.125 em |
| 4 px | 0.25 em |
| 8 px | 0.5 em |
| 10 px | 0.625 em |
| 12 px | 0.75 em |
| 14 px | 0.875 em |
| 16 px | 1 em |
| 18 px | 1.125 em |
| 20 px | 1.25 em |
| 24 px | 1.5 em |
| 32 px | 2 em |
| 48 px | 3 em |
| 64 px | 4 em |
| 80 px | 5 em |
| 96 px | 6 em |
Code and calculation snippets
Reuse the same conversion in a stylesheet or application. Keep contextual font sizes configurable when working with relative CSS units.
.component {
font-size: 16px;
padding: 1.5em; /* 24px */
}const em = pixels / elementFontSize;@use "sass:math";
@function em($px, $context: 16) {
@return math.div($px, $context) * 1em;
}Using the result accurately
EM is helpful when a component's spacing, icons, or child typography should scale with that component. Check which ancestor establishes the font-size context for the property you are converting.
EM is context-dependent and can compound when nested font sizes are expressed in em. The same em value can therefore resolve to different pixel sizes in different components.
Reference: W3C CSS Values and Units: font-relative lengths.