CSS units
How to convert REM to PX
Multiply the rem value by the computed root font size in pixels. This tells you the CSS pixel length the browser uses at that root size.
Open the REM to PX converterUse the rem to px formula
pixels = rem × root font size in pixels
At a 16px root, 1.5rem × 16px = 24px. If the root changes to 20px, that same 1.5rem becomes 30px.
Use the computed font size of the root html element. Do not use a component’s parent font size, because that is how em, not rem, is resolved.
Common values at a 16px root
| REM | CSS pixels |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 3rem | 48px |
CSS pixels are not physical pixels
The converted result is a CSS pixel length. It does not tell you how many hardware pixels light up on a particular screen. Device pixel ratio, operating-system scaling, browser zoom, and display density affect the physical rendering.
Browsers can lay out fractional CSS pixels. A result such as 18.4px is valid, even if individual device pixels cannot be split in the same way.
Use the result for debugging
REM-to-pixel conversion is useful when comparing a design specification with computed browser styles. Check the root size in developer tools, convert the value, then compare it with the element’s computed length.
Do not replace rem with a fixed pixel value just because you calculated the current result. The main purpose of rem is that its pixel result can change with the root size.
Convert with ToolPixels
The free REM to PX Converter accepts fractional values and a configurable root font size. It preserves fractional CSS pixel results instead of assuming browser zoom or device density.