px to rem Converter
Convert between px and rem instantly. Set your base font size, type a value, and get the result — plus a full reference table of the most common sizes.
Reference table
Click any row to load it into the converter.
| px | rem |
|---|---|
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Why use rem instead of px?
px is an absolute unit — 16px is always 16px, regardless of the user's browser settings. rem (root em) is relative to the root font size set on the <html> element. Most browsers default this to 16px, so 1rem = 16px out of the box.
The practical advantage: if a user increases their browser's default font size for accessibility reasons, rem-based layouts scale with it. Pixel-based layouts don't. This is why modern CSS systems — Tailwind, Material UI, and most design tokens — use rem for typography and spacing.
The formula
The conversion is straightforward:
- px → rem: divide the px value by the base font size.
24px ÷ 16 = 1.5rem - rem → px: multiply the rem value by the base font size.
1.5rem × 16 = 24px
If your project overrides the root font size (e.g. html { font-size: 10px } — a common trick to make the math easier), update the base size in the converter above and all values recalculate automatically.
When to stick with px
Not everything should be in rem. Borders (1px solid), box shadows, and fine details that should never scale with user preferences are fine as px. The general rule: use rem for typography and layout spacing, px for decorative details.