CSS px to rem Converter
Convert any CSS pixel value to rem in seconds, with the standard 16-pixel root conversion table, Tailwind CSS defaults, and a quick guide on when to use rem versus px.
What is the difference between px and rem?
A pixel (px) is an absolute CSS unit. Its size is fixed by the browser regardless of user preferences. A rem (rem) is a relative unit — it equals the font size of the root <html> element. By default browsers set the root to 16 pixels, so 1rem = 16px. If a user changes their default font size in browser settings, every element you sized in rem scales with them, while px values stay frozen.
For typography, padding, margin, container widths, and breakpoints, rem is the correct choice in modern CSS. It is one of the simplest accessibility wins available and costs nothing in design fidelity.
Why use rem (and when to keep px)
Use rem for: font sizes, line heights, paragraph spacing, button and form padding, container max-widths, icon sizes, and media-query breakpoints. Use px for: 1px borders, 1px box-shadows, decorative dividers, and any pixel-precise visual element where rounding to a non-integer pixel would cause blur. The rule of thumb: if the value represents content (read by humans), use rem; if it represents a hairline graphic detail, use px.
The standard 16px base conversion table
Most projects keep the browser default of 16 pixels for the root font size. Against that base, here are the most common values you’ll convert:
| Pixels (px) | Rem (16 px base) | Tailwind utility (approx.) |
|---|---|---|
| 8 px | 0.5 rem | text-[8px] / spacing 2 |
| 12 px | 0.75 rem | text-xs |
| 14 px | 0.875 rem | text-sm |
| 16 px | 1 rem | text-base (default) |
| 18 px | 1.125 rem | text-lg |
| 20 px | 1.25 rem | text-xl |
| 24 px | 1.5 rem | text-2xl |
| 32 px | 2 rem | text-3xl-ish |
| 48 px | 3 rem | text-5xl |
How to convert px to rem (5 steps)
- Identify the px value from your design file or current CSS — e.g. 18px.
- Confirm the root font size of the page. Browsers default to 16px unless your reset stylesheet overrides it on the html element.
- Divide your px value by the root font size: 18 ÷ 16 = 1.125.
- Write the result with the rem unit, like font-size: 1.125rem;.
- Test by changing the user’s browser zoom or root font size — your spacing and type should scale proportionally.
The arithmetic is always the same: rem = px ÷ root-font-size. The only thing that changes between codebases is the root font size. Pick a value, document it in a CSS variable, and stick with it.
The 62.5% trick (and whether to use it)
You will see codebases that set html { font-size: 62.5%; }. That makes the root effectively 10px, so conversions become trivial: 16px = 1.6rem, 24px = 2.4rem. The trade-off is that you must then set every body and component font size explicitly (otherwise everything shrinks). Modern teams tend to skip the trick and accept the divide-by-16 mental math, especially because design tools and Tailwind already pre-compute it.
Tailwind CSS defaults
Tailwind already does the px-to-rem conversion for you. Its spacing scale and fontSize scale are both defined in rem against a 16px root. So p-4 = 1rem = 16px, and text-sm = 0.875rem = 14px. This is why you almost never write raw px in Tailwind — the framework is already accessibility-friendly out of the box.
Frequently asked questions
Why use rem instead of px in CSS?
rem scales with the user’s root font size, so anyone who sets a larger default in their browser settings (commonly accessibility users) sees larger text without breaking your layout. px is fixed and ignores that preference, which fails WCAG 1.4.4 (Resize Text).
Do I always divide by 16?
Only when the root font size is the browser default. If your site sets html { font-size: 62.5%; } then the root is effectively 10px and 1rem = 10px — making mental math easier (16px → 1.6rem). Always divide by whatever the actual root is.
rem vs em — what’s the difference?
em is relative to the parent element’s font size, which compounds inside nested elements (a 1.2em inside another 1.2em becomes 1.44em). rem is always relative to the root, so it stays predictable no matter how deeply nested the element sits.
Should I convert px to rem for borders and shadows?
No — keep hairlines (1px borders, 1px shadow blur) in px. They are visual fidelity details, not type or spacing, and converting them to rem causes blurriness on non-standard zoom. Convert font sizes, line heights, padding, margin, gap, and width/max-width.
How does Tailwind CSS handle this?
Tailwind already ships with rem-based defaults: text-base = 1rem (16px), spacing 4 (p-4, m-4) = 1rem (16px). Its scale assumes a 16px root, so you almost never write px directly when using Tailwind utilities.
Need to convert px to other units (mm, cm, inches, pt) or work back from a screen size? Use the full Pixel Converter.