PX to REM Converter: pixel and rem CSS units online
Free px to rem converter that runs in your browser. Convert px to rem and back with any base font size — type in either field and the other updates live. Grab CSS-ready values from the table for the most common type and spacing steps.
| Pixels | Rem | CSS |
|---|
From px-heavy CSS to a rem-based stylesheet
Switching to rem makes your design respect a user's browser zoom and accessibility settings. The math is one division — this converter does it for you.
html { font-size: 16px; }
h1 { font-size: 32px; line-height: 40px; }
p { font-size: 14px; margin-bottom: 24px; }
.btn { padding: 12px 20px; border-radius: 8px; }html { font-size: 100%; } /* 16px */
h1 { font-size: 2rem; line-height: 2.5rem; }
p { font-size: 0.875rem; margin-bottom: 1.5rem; }
.btn { padding: 0.75rem 1.25rem; border-radius: 0.5rem; }When you'll reach for this
Px-to-rem comes up the moment a project starts caring about accessibility, theming, or fluid type.
Accessibility
Honor the user's preferred font size. Pixels override it; rems scale with it.
Responsive design
Drive a whole layout from one root font size — change one variable, scale everything.
Design-system migration
Convert legacy pixel-spec'd components to a clean, rem-based scale in minutes.
Fluid typography
Use rems inside clamp() for responsive sizes that respect user zoom.
How to convert px to rem
Confirm your base font size
Default is 16px — the browser standard. If your :root sets a different size (often 10px for "62.5%" projects), change it in the Options card.
Type into either field
Enter a pixel value to see the rem value, or type a rem value to see the equivalent pixels. Updates are instant.
Copy a CSS-ready snippet
The CSS snippet field renders as font-size: 1rem; /* 16px */. Hit "Copy CSS snippet" and paste it into your stylesheet.
Skim the table for round values
The table lists the most common pixel steps (10–96px). Click a row to copy the rem value — handy for typography scales.
Frequently asked questions
16 pixels — the browser default for the root html element. Change it in the options if your project uses a different base (10px is common in projects that set html{font-size:62.5%}).
rem is always relative to the root font size; em is relative to the nearest parent's font size. rem is predictable, em compounds. Use rem for global type, em for component-local proportions.
Use rem. Pixel media queries ignore the user's preferred font size; rem breakpoints scale with browser zoom. @media (min-width: 48rem) is the accessibility-friendly equivalent of 768px at the 16px default.
Up to four by default — switch to two, three, or six in the precision selector. Trailing zeros are trimmed, so common values like 14px snap to 0.875rem instead of 0.8750rem.
No. Everything runs locally in your browser. Nothing leaves the page.
About px, rem, and the CSS unit family
Pixels (px) are an absolute CSS length — one CSS pixel maps to roughly 1/96 of an inch on a reference device. They're predictable but ignore user preferences. Rems (rem) are relative to the root element's computed font size, so they respect a user's browser font-size setting.
The conversion
1 rem = base font size(usually 16px).- To go from px to rem:
px ÷ base. - To go from rem to px:
rem × base.
Common pitfalls
- Setting
html{font-size:10px}looks neat but overrides the user's preferred font size — most teams usefont-size:100%instead. - Using
emfor nested components can compound (1.2em × 1.2em × 1.2em…). Switch toremat the layout level. - Media queries in pixels (e.g.
768px) don't scale with browser zoom. Prefer rems.
If you need fluid type, combine rems with clamp() using our CSS clamp() Generator.