PX to REM converter
Convert px to rem at any root font size, rewrite every px in a pasted stylesheet at once, and keep a permanent 1–96 px reference table to hand.
- Runs in your browser
- Nothing you enter is sent
- Free, no account
A CSS pixel — an absolute unit in CSS terms, independent of the device pixel ratio.
Relative to the root element's font size, which the browser defaults to 16 px.
The rem basis. 16 px unless you changed the html font-size.
The em and % basis — the computed font size of the element's parent.
- px
- 16
- rem
- 1
- em
- 1
- pt
- 12
- %
- 100
rem = px ÷ root font size (16 px) 1rem = 16 px ÷ 16 (via 16 px)
| px | rem | em | pt | % |
|---|---|---|---|---|
| 1px | 0.0625rem | 0.0625em | 0.75pt | 6.25% |
| 2px | 0.125rem | 0.125em | 1.5pt | 12.5% |
| 4px | 0.25rem | 0.25em | 3pt | 25% |
| 6px | 0.375rem | 0.375em | 4.5pt | 37.5% |
| 8px | 0.5rem | 0.5em | 6pt | 50% |
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 11px | 0.6875rem | 0.6875em | 8.25pt | 68.75% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 13px | 0.8125rem | 0.8125em | 9.75pt | 81.25% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 15px | 0.9375rem | 0.9375em | 11.25pt | 93.75% |
| 16px | 1rem | 1em | 12pt | 100% |
| 17px | 1.0625rem | 1.0625em | 12.75pt | 106.25% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 22px | 1.375rem | 1.375em | 16.5pt | 137.5% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 26px | 1.625rem | 1.625em | 19.5pt | 162.5% |
| 28px | 1.75rem | 1.75em | 21pt | 175% |
| 30px | 1.875rem | 1.875em | 22.5pt | 187.5% |
| 32px | 2rem | 2em | 24pt | 200% |
| 36px | 2.25rem | 2.25em | 27pt | 225% |
| 40px | 2.5rem | 2.5em | 30pt | 250% |
| 44px | 2.75rem | 2.75em | 33pt | 275% |
| 48px | 3rem | 3em | 36pt | 300% |
| 56px | 3.5rem | 3.5em | 42pt | 350% |
| 64px | 4rem | 4em | 48pt | 400% |
| 72px | 4.5rem | 4.5em | 54pt | 450% |
| 80px | 5rem | 5em | 60pt | 500% |
| 96px | 6rem | 6em | 72pt | 600% |
Your CSS never leaves this tab — check it yourself—
Starting the network probe…
The counter above wraps fetch, XMLHttpRequest and navigator.sendBeacon in this tab and counts every call. It does not block anything — it just reports.
Two ways to verify independently
- Turn off Wi-Fi or enable airplane mode, then use the tool. It keeps working, because the page is already fully loaded.
- Open your browser devtools, switch to the Network tab, clear it, and run the tool. No new row appears.
Why this matters
In 2025 researchers found that popular online formatters had retained tens of thousands of user-submitted snippets — JSONFormatter.org and CodeBeautify together exposed roughly 80,000 saved documents, many containing live cloud credentials, private keys and internal database connection strings, because “format this” quietly meant “upload this”. A separate incident exposed roughly 3.5 million user PDFs on a document-conversion service. The only structural fix is not sending the data in the first place: this site is served under a Content-Security-Policy whose connect-src contains no third-party origin, so a request off this device cannot be made even by accident.
The formula
rem = px ÷ root font size
At the 16px browser default:
24px ÷ 16 = 1.5rem
14px ÷ 16 = 0.875rem
10px ÷ 16 = 0.625rem
The root font size is whatever html computes to. Leave it at 16 unless your project
changes it — and if it does, set the field above and every number on this page, including the
reference table, recomputes.
The accessibility argument, stated plainly
A visitor who has set their browser’s default text size to 20px has done so because 16px is hard for them to read. If your type is in px, nothing changes for them: 14px stays 14px. If it is in rem, the entire interface scales proportionally and the site becomes usable.
Page zoom is not the same thing. Zoom scales everything including the layout, which on a laptop means horizontal scrolling; text-size preference scales the text within the layout. Browsers offer both because they solve different problems, and only one of them is defeated by px.
This is also the reason to avoid px in media queries. A breakpoint at 768px fires at
the same viewport width regardless of text size, so a user with large text hits the desktop layout
while their content is still overflowing.
What to use where
| Property | Unit | Why |
|---|---|---|
font-size | rem | Respects the user’s preference; no compounding |
margin, padding, gap | rem | Spacing should grow with type or the rhythm breaks |
border-radius | rem, or px for small values | A 2px radius does not need to scale |
border-width, outline-width | px | A hairline should stay a hairline |
| Breakpoints | rem or em | Layout should respond to text size, not just viewport width |
max-width for readable text | ch | Measure is about characters per line, roughly 60–75ch |
| Component-internal spacing | em | Scales with the component’s own font size — see px to em |
The bulk rewrite, and what it deliberately skips
Paste a whole stylesheet and every matching length is converted at once. The scanner is
string-, comment- and url()-aware, so content: "16px" and
url(sprite-32px.png) are copied through untouched. Three categories are skipped by
default, each with its own switch:
- Zero.
0remis noise;0is the same length in every unit. - 1px and 2px. Almost always a hairline border, outline or shadow spread. Converting them to 0.0625rem makes them scale, and a scaled hairline renders as a blurry 1.3px line at some zoom levels.
- Media query preludes. Converting a breakpoint changes when it fires, which is a design decision rather than a mechanical one. Do it deliberately.
There is also a property filter: enter font-size, line-height and only those
declarations are touched, which is the safest way to migrate an existing codebase incrementally.
The 62.5% trick, and the case against it
Setting html { font-size: 62.5% } makes 1rem equal 10px, so 1.4rem is 14px
and the arithmetic disappears. It is widely used and it has a real cost: it changes the default
text size for every visitor who has not overridden it, and you then have to set the body back to
1.6rem to compensate. It also breaks the direct correspondence between the user’s chosen size
and what they get.
If your project uses it, set the root field above to 10 and this page will match. If you are starting fresh, leave the root at 16, use the reference table, and let the build handle the division.
Questions
What is the formula?
rem = px ÷ root font size. With the browser default of 16 px, 24 px is 1.5 rem and 14 px is 0.875 rem. The page shows the division with your own numbers substituted, so you can check it rather than trust it.
Why use rem instead of px?
Because rem respects the visitor's browser font-size setting and px does not. Someone who has set their default to 20 px because they cannot comfortably read 16 px gets a proportionally larger interface — which is the single highest-impact accessibility change most sites can make.
What does the bulk rewrite skip, and why?
By default: zero values, because `0rem` is noise; 1–2 px values, because they are usually hairline borders that should stay crisp at any zoom; and anything inside a `@media` prelude, because breakpoints in rem behave differently from breakpoints in px. Each of those is a switch. Strings, comments and `url()` contents are never touched at all.
Should I set html { font-size: 62.5% } to make 1 rem = 10 px?
It makes the arithmetic easier and it is a widely used trick, but it changes the default text size for anyone who has not overridden it and it breaks the correspondence with the user's chosen size. Set the root font size field to 10 here if your project uses it; otherwise leave it at 16.
Is rem right for everything?
No. Use rem for type, spacing and radii. Use px for hairline borders and for things that genuinely should not scale. Use ch or ex for measure. Use % or fr for layout that must fill its container.