How to use the PX to REM Converter
- Set the root font size (leave 16 unless your site changes the
htmlfont size). - Type a value into Pixels, REM or EM — the other fields update instantly.
- Use the common sizes table to copy frequently used rem values with one click.
- To convert a whole stylesheet, paste it into Your CSS, choose the options and copy the result.
What is a rem?
rem stands for “root em”: 1rem equals the font size of the root <html> element. Browsers default that to 16px, so 1.5rem = 24px. The key difference from pixels is that rem respects the user’s browser font-size preference — someone who sets their default to 20px gets proportionally larger text and spacing, which a fixed px value would ignore.
The conversion formula
rem = px ÷ root font size and px = rem × root font size. With the default 16px root: 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 32px = 2rem. em uses the same maths but divides by the font size of the element itself (for font-size, its parent), so ems compound when nested.
| Unit | Relative to | Best for |
|---|---|---|
px | Nothing — fixed | Hairline borders, shadows, tiny details |
rem | Root (html) font size | Font sizes, spacing, layout widths |
em | Current element’s font size | Padding that scales with a button’s text, icon sizes, media queries |
Converting a whole CSS file
The snippet converter finds every number followed by px and divides it by your base, while skipping comments, quoted strings and url(…) paths (so bg-16px.png survives). 1px values are kept by default because borders should stay crisp. Inside media queries, rem and em are always based on the browser’s default font size (normally 16px), not on your html rule — tick Leave @media queries unchanged if your base differs.
The 62.5% trick — and why to avoid it
Setting html { font-size: 62.5%; } makes 1rem = 10px for easy maths, but every component then needs explicit font sizes and third-party widgets render tiny. Keeping the 16px default and using a converter like this one is simpler and safer.
rem in Webflow
Webflow’s unit dropdowns support rem and em, and you can type 1.5rem straight into a field. Note that a font size set on Webflow’s Body (All Pages) tag affects inherited text and em, but not rem — rem always refers to the html element. For values that scale with the screen, generate them with the clamp() Calculator.
Tools that pair well with the PX to REM Converter
- Unit Converter — Convert between metric, imperial and technical units in ten categories — with a two-way converter and a table of every unit at once.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Frequently asked questions
How many pixels is 1rem?
html { font-size: 62.5% }, 1rem becomes 10px; if the user raises their browser font size, 1rem grows accordingly.What is the difference between rem and em?
html font size, so it’s predictable everywhere. em is relative to the current element’s font size, so nested ems multiply — 1.2em inside 1.2em is 1.44× the outer size.Should I use rem or px for font sizes?
Should media queries use px, em or rem?
html font-size rule.Will the snippet converter break my CSS?
px, and skips comments, strings and url() values. Review the output once — especially values like 1px borders, which are kept by default.