PX to REM Converter
Pixels to rem and back at any root size, with the reference table — and the accessibility reason relative units matter.
| px | rem | px | rem |
|---|---|---|---|
| 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 |
How to use this tool
- Enter a value in px or rem — the other updates instantly.
- Change the root font size if your CSS sets one other than the 16px browser default.
- Use the reference table for the values you convert every day.
How it works
1rem equals the root element's font size — 16px in every browser's default. So px ÷ root = rem, and 24px = 1.5rem. The accessibility reason to care: users who raise their browser's default font size get larger text everywhere rem is used — but px-sized text ignores their setting entirely. That's why WCAG's resize-text criterion effectively pushes toward relative units for typography.
Sources & references
Content last reviewed: July 2026.
Frequently asked questions
Why use rem instead of px?
Text set in rem scales when users change their browser's default font size — a common low-vision adaptation. Text hard-coded in px doesn't. Use rem for font sizes and spacing that should scale; px remains fine for things like borders.
Is 1rem always 16px?
By browser default, yes — but CSS on the html element can change it, and users can change their default. That's the point: rem respects those changes. This converter lets you set any root size.
What about em?
em is relative to the parent element's font size, so it compounds in nested elements; rem is always relative to the root, which makes it predictable. Most systems use rem for sizes and reserve em for things that should scale with local text, like padding inside a button.