Pixel ⇄ REM Converter
Convert px to rem instantly. Set a custom base, copy with one click, and share the result.
Quick reference (base 16px)
| Pixels | REM |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
Examples
At a 16px base, 24px equals 1.5rem. At a 10px base (62.5%), 24px equals 2.4rem.
How conversion works
The formula is simple: rem = px ÷ base and px = rem × base. The base is the computed font-size of the <html> element. Browsers default it to 16px.
Why use REM
REM scales with the user's preferred font size, making your layout more accessible. Spacing, typography, and component sizes that use rem adjust automatically when the root is resized.
FAQ
Is 1rem always 16px?
Not always. 1rem equals the root (html) font size. By default it's 16px, but your CSS or user settings can change it.
How do I convert pixels to rem?
Divide the pixel value by the base font size: rem = px ÷ base. For example, 24px ÷ 16 = 1.5rem.
Should I set html { font-size: 62.5% } to make 1rem = 10px?
It's a preference. It can make mental math easier but may conflict with user expectations and tutorials. Keeping the default 16px base is simplest for most teams.
When should I still use px?
Pixel units are fine for borders, hairlines, and some icon sizes. Use rem for text and for spacing that should scale with text.
Does REM help with responsive design?
Yes. If you scale the root on breakpoints or use fluid techniques, REM-based type and spacing adapt automatically.
Tips
- Keep borders and hairlines in px.
- Use rem for typography and spacing that should scale with text.
- Consider
clamp()for fluid type between breakpoints.