PX to REM Converter
Convert pixels and rem with a custom root size.
Browsers default to 16px unless the user changes it.
| px | rem |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
Use rem for font sizes and spacing so your layout scales when a visitor increases their browser's default text size for accessibility. Use px for things that should stay a fixed size regardless of text-size settings, like 1px borders.
How to use the PX to REM Converter
- 1 Set your root (html) font size — 16px is the browser default.
- 2 Type a value into either the px or rem field to convert instantly both ways.
- 3 Check the reference table for common sizes like 8px, 16px and 24px at your root size.
Examples
- ▸ At the default 16px root, 24px = 1.5rem.
- ▸ At an 18px root, 16px ≈ 0.889rem.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px root, 24px ÷ 16 = 1.5rem. This tool does the division for you and updates live as you type.
Why use rem instead of px in CSS?
rem scales with the root font size, so when a user increases their browser’s default text size for accessibility, rem-based spacing and type scale up with it — px values stay fixed and can break layouts or hurt readability.
What is the difference between rem and em?
rem is always relative to the root (html) element’s font size, so it stays predictable no matter how deeply nested an element is. em is relative to the current element’s own font size, which can compound unexpectedly in nested components.
Do browsers really default to 16px?
Yes, 16px is the standard default root font size in every major browser, though users can change it in their accessibility settings — which is exactly why rem is useful.