REM to PX Calculator
Know what 1.5rem really renders at.
REM to PX Calculator
Pixels = rem x root font size; rem = pixels / root font size.
Calculated instantly
Embed this calculator
Put this calculator on your own site with the snippet below. The frame contains the tool only, reports its own height, and carries a visible link back to the full page. Embedding is free; keep the attribution link as it is, and do not wrap the frame in a way that hides it.
Preparing the embed code for this page...
What This Calculator Does
The REM to PX Calculator converts a rem value into pixels and a pixel value back into rem at a chosen root font size. It is a quick check for design handoff, CSS review, and accessibility testing when the root size is not the browser default.
How It Works
One rem equals the root element font size. Multiplying a rem value by the root size in pixels gives the rendered pixels. Dividing a pixel value by the root size gives the equivalent rem. The root percentage compares the chosen root size with the 16 px browser default, which is useful when a stylesheet sets html font-size as a percentage.
Example
At the default 16 px root, 1.5rem is 24 px, and 24 px is 1.5rem. The root size is 100 percent of the 16 px default. If the root is set to 18 px, 1.5rem becomes 27 px and 24 px becomes 1.333rem.
Formula
rem x root font sizepixels / root font sizeroot font size / 16 x 100Reading the Results
REM in pixels
The rendered size at the root font size you entered. If the user changes their browser default, this value changes with it.
Pixels in REM
The rem value that produces the pixel size. Useful when converting a pixel-based design token into a relative one.
Root size as percentage of 16px
How the root compares with the browser default. A 62.5 percent root makes 1rem equal 10 px, which is convenient but can trip up users who rely on a larger default.
Sources and References
MDN Web Docs - rem
Root em CSS unit
Defines rem relative to the root element font size and explains the difference from em.
W3C WCAG 2.2 - Success Criterion 1.4.4 Resize Text
Text resize and relative units
Explains why text should scale with the user setting rather than a fixed pixel size.
References identify the method or data behind this calculator. Where a standard or tariff changes, the current edition applies, and the assumptions stated above take precedence over a remembered figure.
Frequently Asked Questions
Is 1rem always 16px?
Only when the root font size is the browser default of 16 px and no stylesheet overrides it. Users can set a larger default, and a site can change html font-size. The rem unit follows that root value, which is why it is better for accessibility than a fixed pixel.
What is the difference between rem and em?
rem is relative to the root element font size. em is relative to the font size of the element itself or its parent, so nested em values compound. Use rem for a predictable global scale and em for spacing that should scale with a component local font size.
Should I set html font-size to 62.5 percent?
It makes 1rem equal 10 px at the default, which simplifies mental arithmetic, but it also assumes the user has not changed the default. A root of 100 percent preserves the user setting and is usually safer. If you use 62.5 percent, test with a larger browser font size.
Why does my rem conversion differ from the design file?
The design tool may use a different root size, or it may treat its canvas as pixels rather than rem. Confirm the root used in the design system and convert from that. A 1.5rem token at a 16 px root is 24 px, but the same token at an 18 px root is 27 px.
Are rem units supported everywhere?
Yes in all current browsers. The practical issue is not support but consistency: a fixed root size, a CSS reset, or a component library can change the effective value. Inspect the computed root font size when a conversion looks wrong.