How to convert ems to pixels
Multiply the em value by the relevant element or parent font size. In a 16px context, 1em equals 16px and 1.5em equals 24px.
px = em × element font sizeAt a 16px element size: px = em × 16.
Convert 1.5 em to px
Apply the conversion rule to 1.5 ems. Using the default settings, the result is 24 px.
Default context: element font size 16px.
em to px conversion table
These pre-calculated values use the same formula and default settings as the converter above.
| ems (em) | pixels (px) |
|---|---|
| 0.125 em | 2 px |
| 0.25 em | 4 px |
| 0.5 em | 8 px |
| 0.75 em | 12 px |
| 1 em | 16 px |
| 1.125 em | 18 px |
| 1.25 em | 20 px |
| 1.5 em | 24 px |
| 2 em | 32 px |
| 2.5 em | 40 px |
| 3 em | 48 px |
| 4 em | 64 px |
| 5 em | 80 px |
| 6 em | 96 px |
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 pixels = em * elementFontSize;@function px-from-em($em, $context: 16) {
@return $em * $context * 1px;
}Using the result accurately
Use the browser's computed styles to identify the effective font-size context. This is especially important for nested components that inherit or override font size.
The calculation is only as accurate as the supplied context. Nested em declarations and property-specific behavior can make the effective base different from the root font size.
Reference: W3C CSS Values and Units: font-relative lengths.