How to convert root ems to pixels
Multiply the rem value by the root element's font size. If the root font size is 16px, 1rem equals 16px and 1.5rem equals 24px.
px = rem × root font sizeAt a 16px root: px = rem × 16.
Convert 1.5 rem to px
Apply the conversion rule to 1.5 root ems. Using the default settings, the result is 24 px.
Default context: root font size 16px.
rem to px conversion table
These pre-calculated values use the same formula and default settings as the converter above.
| root ems (rem) | pixels (px) |
|---|---|
| 0.125 rem | 2 px |
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 2 rem | 32 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
| 6 rem | 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.
html { font-size: 16px; }
.heading { font-size: 1.5rem; } /* 24px */const pixels = rem * rootFontSize;@function px($rem, $base: 16) {
@return $rem * $base * 1px;
}Using the result accurately
Use the computed font size of the HTML element, not a component's local font size. This keeps the conversion aligned with how rem is resolved by CSS.
A rem value has no single pixel equivalent until the root font size is known. Project resets, accessibility settings, and responsive CSS can change that context.
Reference: W3C CSS Values and Units: font-relative lengths.