CSS units
How to convert PX to REM
Divide the pixel value by the computed font size of the root html element. The result is a rem value that scales with that root size.
Use the px to rem formula
rem = pixels ÷ root font size in pixels
With a 16px root, 24px ÷ 16px = 1.5rem. The units cancel during division, leaving a multiplier of the root font size.
Do not assume the root is always 16px. It is the common browser default, but a website stylesheet, user preference, or browser setting can change the computed value.
Common conversions at a 16px root
| Pixels | REM |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
At a 20px root, the same 24px target becomes 1.2rem. Always attach the conversion table to its assumed root size.
When rem is useful
REM units are useful for typography and spacing that should respond to the root font size. Unlike em, rem is relative to the root rather than the current element or parent, which reduces compounding surprises in nested components.
Pixels are still appropriate for some fixed details. Unit choice should follow the desired behavior, not a rule that every length must use rem.
Handle decimals and negative values
Fractional rem values are valid. Keep enough precision to preserve the intended size, and avoid rounding 0.9375rem to 0.94rem if exact alignment matters. Negative rem values are valid for properties such as margin or transform, but not for properties that reject negative lengths, such as font size.
Convert with ToolPixels
The free PX to REM Converter accepts fractional and negative pixel values and lets you set the actual root font size. Enter both values, convert, and copy the rem result.