PX to REM Converter
Convert px to rem (and rem back to px) with a live, bidirectional calculator. Set a custom root font size, batch-convert a whole stylesheet's worth of values at once, and copy clean CSS output — all client-side, nothing leaves your browser.
Bold ticks mark every root-font-size interval (currently 16px). The dot tracks the value in the converter below.
/* generated by mockuptemplate.net */ .element { font-size: 1rem; /* 16px */ }
| PX | REM |
|---|
What is REM, and why convert PX to REM?
rem stands for "root em" — a CSS unit sized relative to the font size
of the root <html> element, rather than a fixed number of screen
pixels. When someone increases their browser's default text size for readability,
every value expressed in rem scales with it automatically; values in
px don't move at all. That single difference is why most modern design
systems — Tailwind, Material Design, Bootstrap 5 — default to rem for
typography and spacing.
The default root font size in every major browser, unless the user changes it.
The entire conversion: rem = px ÷ root font size. No other variables involved.
Unlike em, rem always resolves against one single value, never a chain of parents.
PX vs REM vs EM — which unit to use where
These three units get confused constantly because they all describe "size," but they resolve completely differently.
| Unit | Resolves against | Scales with browser zoom / font settings | Best for |
|---|---|---|---|
| px | Fixed screen pixels | No | Borders, hairlines, icon strokes, pixel-perfect details |
| rem | Root (html) font size only | Yes | Typography, spacing, layout — anything that should respect user preferences |
| em | The nearest parent element's font size | Yes, but compounds through nesting | Component-local sizing where an element should scale with its own text |
How to use this PX to REM converter
Set your root font size. Leave it at the browser default of 16px, switch to the 10px "62.5% trick," or type your design system's actual base value.
Type a value in either field. Enter pixels to see the rem equivalent, or enter rem to see pixels — both fields stay in sync live, no "convert" button needed.
Copy the ready-made CSS. The snippet box below the converter updates with a working declaration, plus a pixel-value comment for quick sanity-checking.
Converting a whole stylesheet? Switch to Batch Convert, paste every pixel value from your CSS on its own line, and copy the full rem list back out.
Need a cheat sheet? Open Reference Table for a scrollable px ↔ rem lookup at your chosen root size — handy to keep open in a second tab while you code.
Best practices for using rem in production CSS
Use rem for font-size, margin, padding, and gap so your layout respects a user's accessibility settings.
Keep px for 1px borders, box-shadow offsets, and icon strokes — things that should stay crisp regardless of text-size preferences.
Declare your root font size explicitly in CSS (html { font-size: 100%; } or a specific px value) rather than leaving it implicit.
Setting html { font-size: 62.5%; } purely to make mental math easier — it silently overrides a user's own browser font-size preference, which undercuts the accessibility benefit rem is supposed to provide.
Mixing px and rem for the same property across similar components without a reason — it makes the scaling behavior of your UI unpredictable.
Frequently asked questions
How do I convert px to rem manually?
Divide the pixel value by your root font size. At the browser default of 16px, 24px ÷ 16 = 1.5rem. If your project sets the root to 10px, the same 24px becomes 2.4rem instead — the root size is the only variable that changes the answer.
Why isn't my rem value matching what I expected?
The most common cause is a root font size that isn't actually 16px — check for a html { font-size: ... } rule in your CSS (frameworks and resets often set it to 62.5% or another value), and use that number in the converter's "root font size" field instead of assuming the default.
Should every pixel value in my CSS become rem?
No. Typography, spacing, and layout dimensions benefit from scaling with user font-size preferences, so rem makes sense there. Hairline borders, box-shadow offsets, and other detail work that should stay fixed regardless of text size are usually fine left in px.
Does changing root font size break my layout?
Only if spacing and sizing were built entirely in px alongside rem-based type — the two can drift apart. Building both type and spacing in rem from the same root keeps proportions consistent no matter what the root size ends up being.
Is this px to rem converter free to use?
Yes — it runs entirely in your browser with no signup, no rate limit, and no data sent anywhere. You can convert a single value, batch-convert a whole list, or browse the reference table as often as you like.