📏 PX to REM Converter
Convert px ↔ rem / em for CSS at any root font size — type either value and the other updates, with a quick-reference table for common sizes.
24px = 1.5rem(at 16px root)
| px | rem (at 16px) |
|---|---|
| 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 |
| 64px | 4rem |
rem is relative to the root font size; em is relative to the element's own font size — the maths is identical, only the reference differs. Using rem for type keeps layouts scalable when a user changes their browser's default size. 🔒
How the px to rem converter works
rem and em are relative units: 1rem equals the root font size (16px by default), and 1em equals the current element's font size. The conversion is simply value ÷ base for px→rem and value × base for rem→px. Set your root size, type a pixel or rem value, and the converter fills in the other instantly, plus lists common pixel sizes as rem.
Use rem for font sizes and spacing so a user who increases their browser's default text size gets a proportionally larger layout — an important accessibility win that fixed pixels break. em behaves the same way but is relative to the element itself, which is useful for things like padding that should scale with a component's own font size. The maths is identical; only the reference point changes.
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 it as you type and shows a table of common conversions.
What is the difference between rem and em?
rem is relative to the root (html) font size, so it's consistent everywhere. em is relative to the current element's font size, so it compounds through nested elements. Both convert with the same arithmetic; only the base differs.
Why use rem instead of px for fonts?
Because rem respects the user's chosen browser text size, so people who set a larger default get a larger, still-proportional layout. Fixed pixel fonts ignore that preference, which is an accessibility problem.
What if my root font size isn't 16px?
Change the root value in the tool and every conversion and the table update to match. Some sites set html { font-size: 62.5% } so 1rem = 10px for easier maths — set the root to 10 for that.