Pixel to REM Converter
Convert px to rem and em instantly based on custom root font settings.
Base Font Size
Usually 16px (browser default)
Common Scales
| PX | REM | EM | TW |
|---|---|---|---|
| 8px | 0.5rem | 0.5em | w-2 |
| 10px | 0.625rem | 0.625em | w-2.5 |
| 11px | 0.6875rem | 0.6875em | w-2.75 |
| 12px | 0.75rem | 0.75em | w-3 |
| 13px | 0.8125rem | 0.8125em | w-3.25 |
| 14px | 0.875rem | 0.875em | w-3.5 |
| 15px | 0.9375rem | 0.9375em | w-3.75 |
| 16px | 1rem | 1em | w-4 |
| 18px | 1.125rem | 1.125em | w-4.5 |
| 20px | 1.25rem | 1.25em | w-5 |
| 24px | 1.5rem | 1.5em | w-6 |
| 28px | 1.75rem | 1.75em | w-7 |
| 32px | 2rem | 2em | w-8 |
| 36px | 2.25rem | 2.25em | w-9 |
| 40px | 2.5rem | 2.5em | w-10 |
| 48px | 3rem | 3em | w-12 |
| 56px | 3.5rem | 3.5em | w-14 |
| 64px | 4rem | 4em | w-16 |
| 72px | 4.5rem | 4.5em | w-18 |
| 80px | 5rem | 5em | w-20 |
| 96px | 6rem | 6em | w-24 |
Tailwind Scale
"Always use REMs for typography and major spacing. It ensures your UI respects user accessibility settings, like custom browser font sizes."
REM vs PX: Which should you use?
zoom_inThe Case for REM
REM units are relative to the root font-size. This is the gold standard for accessibility. If a user increases their browser's default font size, your entire layout will scale proportionally, keeping the design readable and usable.
straightenThe Case for PX
Pixel units are absolute. Use them for elements that should never scale, such as 1px borders, subtle drop shadows, or decorative elements where pixel-perfection is required regardless of text size.
Common Questions
px to rem, and Why It's Not Just Division
The conversion table (16px base)
With the default 16px root size, the values you'll convert daily:
| px | rem | Typical role |
|---|---|---|
| 12 | 0.75 | Captions, fine print |
| 14 | 0.875 | Secondary text |
| 16 | 1 | Body text — the anchor |
| 20 / 24 | 1.25 / 1.5 | H3 / H2 |
| 32 / 48 | 2 / 3 | H1 / display |
| 4 / 8 / 16 / 24 | 0.25 / 0.5 / 1 / 1.5 | The spacing scale |
The reason rem exists
Users change their browser's base font size — for eyesight, by preference, or via OS accessibility settings. rem-based sizes scale with that choice; px-based sizes ignore it. Set text and spacing in rem and a user who bumps their default to 20px gets a proportionally larger, still-coherent layout instead of tiny fixed text. The places px stays right: borders (1px is a crisp line at any scale), and tiny detail offsets where scaling adds nothing.
Converting a legacy stylesheet
Migrating px → rem mechanically (divide by 16) is safe; the win is doing it onto a scale — snap stray 13px and 15px values to 0.875rem and 1rem while you're there, and the design tightens for free. The sizes feed your grid and flex gaps, and the slimmed result ships through the CSS minifier.