PX ⇄ REM Converter
Batch-convert between px and rem with an adjustable root font size — paste in design specs for responsive styles.
>_ USAGE GUIDE
Batch-convert between px and rem in both directions, with an adjustable root font size (16px by default): paste a run of values — design-spec measurements or a stylesheet fragment — and every result appears at once. When writing responsive styles or migrating design measurements into a rem system, one paste replaces dividing by 16 a dozen times.
- Set the root font size: 16px is the browser default; adjust if your project uses another base
- Paste your values: a list of numbers or a CSS fragment
- Copy the results: decimal outputs like
18px = 1.125remare supported, and the whole conversion table copies at once
Pure math, computed locally in real time — nothing is uploaded. Designers and developers can keep the tool open beside the design file during handoff: every measurement pasted in returns its rem twin immediately, and the adjustable base means the same numbers work across projects with different conventions.
>_ FAQ
Q1 · How do px and rem relate?
rem means root em — a unit relative to the root element's font size: with html at 16px, 1rem = 16px and 0.5rem = 8px. The contrast with em matters: em is relative to the parent element and compounds down the tree, while rem always anchors to the root — predictable, which is why it anchors modern responsive layouts.
Q2 · Why prefer rem over px?
rem lets the whole page scale together: change the root font size in one place — or let the user's browser preference change it — and every rem-sized element follows. That is also the accessibility argument: a user who enlarges their default font gets a proportionally larger layout with rem, while px-fixed layouts stay small. In media queries, adjusting only the root size switches the entire density tier.
Q3 · Why is the base 16px, and can it change?
16px is the browser's default root size — the historical balance of legibility and convention — and rem uses it whenever html{font-size} is not set. It can be changed: html{font-size:62.5%} sets the base to 10px so 1rem = 10px and mental math becomes trivial, a popular trick. Be aware it overrides the user's font-size preference, an accessibility trade-off. This tool lets you set either base.
Q4 · How do I convert a design spec's px values to rem in bulk?
Paste the spec's list of measurements (like 16 24 32 48) or the stylesheet fragment into the tool and copy the rem outputs back. For teams, standardize the convention: a 16px base, three decimal places, and one shared conversion path — this tool or a script — so everyone's numbers match instead of drifting with manual arithmetic.
Q5 · What about fractional px values like 0.5px borders?
0.5px is the classic hairline-border trick — effective on high-DPI screens, falling back to 1px elsewhere. It converts fine (0.03125rem) but such tiny rem values hurt readability and only behave when the root is exactly 16px. Keep fractional px values as they are; reserve rem for layout dimensions and font sizes that genuinely need to scale as a system.