PX to REM Converter
Turning one pixel value into rem is simple division; the practical work is the sizing system around it. A full set of font sizes needs to stay on one ratio, responsive headings need to grow smoothly across screen widths, and older stylesheets often need many px values rewritten safely. This tool is built for those jobs. It links px, rem, em, pt, and percentage against a root font-size you choose: edit any one and the other four update immediately. From there, the type scale tab turns a base value and a ratio into a full run of rem steps, the fluid clamp() tab draws size against viewport so you can see where growth starts and where it caps, and the batch tab rewrites px in a CSS block to rem in one pass. An accessibility panel shows another detail that is easy to miss: when a reader raises their browser font size, sizes written in rem grow with it while sizes written in px stay fixed. Every calculation runs in your browser, and pasting production code never sends it anywhere.
- Link px, rem, em, pt, and percentage in real time against an adjustable root and parent font-size
- Watch a live panel show rem grow with the reader’s browser font size while px stays put
- Turn a base size and a musical ratio into a modular type scale, exported as :root CSS variables
- Build fluid type with clamp() next to a size-versus-viewport chart and a draggable preview width
- Rewrite every px in a CSS block to rem at once, with an option to keep 0 and 1px hairline borders
The root font-size drives rem (16px by default); em and % go by the parent font-size beside it.
The quick brown fox
Browsers let readers set their own default font size. rem grows with that choice; px stays fixed. Here is how the same size behaves as the reader raises the root.
Overview
The unit arithmetic is the easy step here. What actually slows you down is holding a whole set of sizes to one ratio, getting fluid sizing to behave, and reworking an old stylesheet full of px. So those jobs sit right next to the conversion — one tab away each.
- 01
Five units, one edit
Type into any of px, rem, em, pt, or percentage and the other four recalculate against the root and parent font-size you set, each row with its own copy button.
- 02
Accessibility, spelled out
The same value appears side by side at browser roots of 16, 20, and 24px: rem grows with the setting, px stays fixed, and the difference is visible without extra explanation.
- 03
A modular type scale
Set a base size, pick a ratio — major third, golden ratio, whichever — choose how many steps run up and down, and every rung lists its px and rem together.
- 04
A fluid clamp() builder
Give a min and max viewport their own size and you get a clamp() in rem, plus a chart that shows how the size travels between those two widths.
- 05
Batch-rewriting a stylesheet
Paste a block of CSS and swap px to rem in one pass — the other way too — with the option to keep 0 and 1px hairline values unchanged.
- 06
Output you can paste as-is
Scale steps export as CSS variables, clamp() comes out in rem, and batch results keep your original indentation and formatting so they drop straight back in.
How to use
Without leaving the page or reaching for a calculator, go from a single conversion to a sizing setup that stays consistent and treats accessibility as part of the job.
- 01
In Convert, set the root font-size, type a value in any unit, and read px, rem, em, pt, and % together.
- 02
Glance at the accessibility panel to gauge how far the value grows for readers who raise their browser font size.
- 03
Switch to Type scale, settle on a base and a ratio, and copy the generated rem steps as CSS variables.
- 04
Open Fluid clamp(), give two viewports a min and max size, and copy the clamp() expression it returns.
- 05
Head to Batch CSS, paste your stylesheet, turn every px into rem in one pass, and paste it back.
Details
Sizing on the web is really a relationship between a value, a root, and the reader’s own preferences. So the tool keeps every part of that out in the open, rather than assuming everyone is stuck at a fixed 16px.
- An adjustable root font-size, to match projects that set the root above or below 16px
- A separate parent font-size input, so em and % are figured in the right context rather than forced onto the root
- Five units in sync, so whichever one you edit, the other four keep up
- An accessibility panel that lines rem up against px at reader roots of 16, 20, and 24px
- Eight ratios from minor second to golden ratio, so a type scale is one click away
- Scale steps exported as :root custom properties, with the pixel equivalent noted in a comment
- A fluid clamp() builder with a chart and a draggable preview width, so you can see the size climb
- Batch conversion across a whole CSS block, with an option to keep 0 and 1px so hairline borders survive
- A count after each batch run, so a missed value does not slip past you
- Conversion, scales, clamp(), and batch all run locally — nothing uploaded, nothing kept
Use cases
Converting px to rem is rarely a one-off. Behind it there is usually a scale to maintain, a fluid heading to tune, or an old stylesheet to modernize — and each of those has a tab of its own here.
-
Moving a design to rem
Translate the pixel values from a mockup into rem so type and spacing follow the reader’s browser font-size settings, keeping accessibility covered.
-
Building a type scale
Generate one coherent set of font sizes from a base and a ratio, then drop those rem variables straight into a design system.
-
Fluid responsive headings
Tune a heading that eases from phone to desktop with clamp(), previewing its exact size at any viewport width before it ships.
-
Modernizing an old stylesheet
Paste legacy CSS with px hard-coded everywhere, batch it to rem, and leave the hairline borders and zero values exactly as they were.
-
Standardizing on one unit
Whether a spec arrives in px, pt, or em, convert it to the unit your codebase settled on without working out the ratio in your head.
-
Explaining rem to a teammate
Open the accessibility panel in a review to show plainly why a component in rem honors user zoom and one in px does not.
-
Working from a non-default root
Some projects deliberately set the root to 62.5% or another value; with the root exposed as an input, the rem still comes out right.
-
Fluid spacing and gaps
Take the same clamp() approach to padding, margin, and grid gaps so the whitespace flexes with the viewport, not just the text.
See also
With sizes settled, layout comes next, so lay out the structure with the Flexbox and Grid Generator , and when those sized elements move or transition, shape the timing with the Cubic Bezier Generator so spacing, layout, and motion all come from one considered system.
Best practices
A few small habits keep unit choices consistent and accessible, instead of a patchwork of px here and rem there that works against the reader’s settings.
- Reach for rem on font-size first, so text respects the reader’s browser font-size and zoom.
- Leave the root at the browser default of 16px unless you have a clear reason to change it.
- Use rem for spacing that should scale with text; save px for hairline borders and fixed details.
- Turn to em when a value should track its own element’s font-size, like padding inside a button.
- Anchor a type scale on one base and ratio rather than eyeballing a size per component.
- Hand fluid sizing to clamp() so headings adapt to the viewport and spare you a pile of media queries.
- Do not set the root font-size in px — in some browsers it stops user zoom from taking effect.
- Round rem values sensibly, so long decimals do not add noise to the stylesheet.
Limitations
The tool stays focused on CSS length units and the sizing systems built from them, so a few neighboring things are deliberately left outside.
- It converts CSS length units. vw and vh depend on the screen size at runtime and only take part inside the fluid builder.
- Conversions follow the standard 96 DPI reference, where CSS puts 1pt at 1.333px and 1in at 96px.
- em and % here are worked out against a single parent font-size; nested inheritance on a real page can stack up differently.
- Batch mode rewrites px and rem tokens by text replacement rather than parsing full CSS, so double-check unusual or minified input.
- The accessibility panel demonstrates browser font-size scaling; it does not stand in for contrast, focus order, or other accessibility checks.
- clamp() output covers linear interpolation between two viewports and is no substitute for testing on real devices.
FAQ
The questions that come up most around converting px to rem, choosing a unit, and building sizing in CSS that is both accessible and fluid.
How do I convert px to rem?
Divide the pixel value by the root font-size. At the default root of 16px, 24px is 24 ÷ 16 = 1.5rem. Type any px value in Convert and the rem appears instantly, using the root you set.
What is the default root font-size for rem?
Browsers default to 16px, so 1rem equals 16px as long as no stylesheet changes the root. This tool defaults to 16px too, and lets you switch to another value when your project overrides the root.
Should I use rem or px for font-size?
Lean toward rem for font-size. rem scales up with the reader’s browser font-size and zoom, so text stays accessible, whereas a px font-size ignores those preferences. The accessibility panel puts that difference right in front of you.
What is the difference between rem and em?
rem is always relative to the root font-size, so it is predictable across the page. em is relative to the current element’s font-size, so it compounds through nesting. This tool converts each against its own root and parent input.
And how do I convert rem back to px?
Multiply the rem value by the root font-size: at a 16px root, 1.5rem is 24px. Switch the source unit to rem in Convert, or pick rem → px in Batch CSS to turn a whole block at once.
How do I make a fluid font size with clamp()?
Open Fluid clamp(), give the min and max viewport their own size, and copy the rem clamp() it generates. The chart beside it draws how the size travels between those two widths.
Can I convert a whole stylesheet from px to rem at once?
Yes. Paste your CSS into Batch CSS and px values are rewritten to rem in one pass. When converting px to rem, you can keep 0 and 1px, which helps with hairline borders you would rather not scale.
Does anything get uploaded when I convert?
No. Conversion, scale generation, clamp() math, and batch rewriting all happen in your browser, so pasting production CSS or unreleased design values keeps it local.
Related tools
Units are the base for the rest of the layout. Once sizing is settled, move on to structure and motion so the whole interface follows one scale system.