REM to PX converter
Convert rem values back to pixels at any root font size, so you can check what a design token will actually measure on screen.
- Runs in your browser
- Nothing you enter is sent
- Free, no account
Relative to the root element's font size, which the browser defaults to 16 px.
A CSS pixel — an absolute unit in CSS terms, independent of the device pixel ratio.
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
- 256
- rem
- 16
- em
- 16
- pt
- 192
- %
- 1600
px = rem × root font size (16 px) 256 px = 16rem × 16 (via 256 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
px = rem × root font size
At the 16px browser default:
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32pxWhy convert back
Everything outside CSS is in pixels. Figma, Sketch, screenshots, the numbers a designer writes on a spec, the size a stakeholder measures with a ruler on their screen — all pixels. Converting back is how you answer questions that come from outside the codebase.
- “The heading looks smaller than the mockup.” 1.75rem is 28px; the mockup says 30px. Now it is a fact rather than an impression.
- “Is this tap target big enough?” WCAG 2.2 asks for 24×24 CSS pixels minimum, and both Apple and Google recommend around 44px. A 2.5rem button is 40px — borderline.
- “Does this fit on a 320px screen?” Add up the rem widths in px and find out.
- Debugging a third-party component whose CSS is in px while yours is in rem.
A CSS pixel is not a device pixel
Worth being precise about, because it causes real confusion. The CSS pixel is a logical unit — formally a reference pixel, defined as the visual angle of one pixel on a 96dpi display at arm’s length. On a 2× display, one CSS pixel is painted using four device pixels, and the content is the same physical size; it is just sharper.
So 1.5rem is 24 CSS pixels on every device, and it measures roughly the same on a
phone as on a monitor. The device pixel ratio affects rendering fidelity, not layout size.
Quick reference at a 16px root
| rem | px | Typical use |
|---|---|---|
| 0.75 | 12 | Captions, footnotes, badge text |
| 0.875 | 14 | Secondary text, dense UI, table cells |
| 1 | 16 | Body text — the floor for comfortable reading |
| 1.125 | 18 | Lead paragraph, comfortable long-form body |
| 1.25 | 20 | Small heading |
| 1.5 | 24 | Section heading, or a standard spacing step |
| 2 | 32 | Page heading on mobile |
| 3 | 48 | Hero heading |
rem ignores nesting entirely
That is the whole point of it, and the difference from em. A 1.5rem value is 24px
whether the element is a direct child of body or fifteen levels deep inside components that each
set their own font size. If you want a value that responds to its container’s type size, you
want em instead.
One place rem is not root-relative
Inside a media query, rem and em both resolve against the browser’s
initial font size, not against your declared html font size. If your project sets the
root to 10px with the 62.5% trick, a 48rem breakpoint still fires at 768px, not 480px.
This surprises people every time, and it is specified behaviour rather than a bug.
Questions
What is the formula?
px = rem × root font size. At the 16 px default, 1.5 rem is 24 px and 0.875 rem is 14 px. Change the root field if your project sets `html { font-size }` to something else and every number on the page follows.
Why would I convert back to px?
To check a design against a mockup. Figma, Sketch and every screenshot are in pixels, so when a stakeholder asks why the heading "looks small", converting 1.75 rem to 28 px is how you answer. It is also how you verify a hit target clears the 44 px minimum.
Does the result change on a high-DPI screen?
No. A CSS pixel is a logical unit, not a hardware one. On a 2× display, 24 CSS px is 48 device pixels but still measures the same physical size — that is the whole point of the device pixel ratio.
What if a parent element sets a font size?
Irrelevant for rem — that is what distinguishes it from em. rem is always relative to the root element, no matter how deeply nested the element is. If nesting matters to you, you want the em converter.