How to convert pixels to root ems
Divide the pixel value by the root element's font size. With the common 16px browser default, 16px equals 1rem and 24px equals 1.5rem.
rem = px ÷ root font sizeAt a 16px root: rem = px ÷ 16.
Convert 24 px to rem
Apply the conversion rule to 24 pixels. Using the default settings, the result is 1.5 rem.
Default context: root font size 16px.
px to rem conversion table
These pre-calculated values use the same formula and default settings as the converter above.
| pixels (px) | root ems (rem) |
|---|---|
| 1 px | 0.0625 rem |
| 2 px | 0.125 rem |
| 4 px | 0.25 rem |
| 8 px | 0.5 rem |
| 10 px | 0.625 rem |
| 12 px | 0.75 rem |
| 14 px | 0.875 rem |
| 16 px | 1 rem |
| 18 px | 1.125 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 32 px | 2 rem |
| 48 px | 3 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 96 px | 6 rem |
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 rem = pixels / rootFontSize;@use "sass:math";
@function rem($px, $base: 16) {
@return math.div($px, $base) * 1rem;
}Using the result accurately
REM units are useful when spacing and typography should scale from one document-level setting. Confirm the computed font size of the HTML element before converting a design system.
The result changes when the root font size changes. Browser zoom does not rewrite the CSS conversion ratio, but user font preferences and project styles can affect the computed root size.
Reference: W3C CSS Values and Units: font-relative lengths.