PX to REM
Convert px to rem and back against any root font size, with a live batch converter for whole blocks of CSS.
Reference at root 16px
| px | rem |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Why rem beats px for accessibility
When you size text in px, you pin it to an absolute value that ignores the
reader. Someone who has raised their default browser font size - because they find 16px hard
to read - gets no benefit, because your 14px stays 14px. Size in rem instead and
everything scales from the root font size the user actually chose, so your layout respects
their setting. That single change is one of the cheapest accessibility wins in front-end work.
The conversion, and the 62.5% trick
The maths is just division: rem = px / root. At the usual 16px root, 24px is
1.5rem and 8px is 0.5rem. A popular shortcut is to set
html { font-size: 62.5% }, which makes 1rem equal exactly 10px. Now the
conversions are trivial - 18px is 1.8rem, 42px is 4.2rem - while your components still scale
with the user preference. Set the root above to 10 and the table updates to match this
approach.
When px is still the right call
rem is not always the answer. Hairline borders (1px), box-shadow offsets and
blur radii, and the occasional pixel-perfect icon usually want px, because you do
not want a 1px border ballooning to 1.5px when the user bumps their font size. The rule of
thumb: rem for anything type-related or layout-related that should breathe with the reader,
px for fine visual details that should not.
Building out a design system? The hex to RGB converter helps with colour tokens, the CSS minifier shrinks the final stylesheet, and the shade generator builds consistent tints and shades.