The page does not read your browser’s real root. It multiplies the two numbers you type. If a stylesheet changed the root, type that root or the pixels will not match the page you ship.
How to use
- Enter the rem value and the root font size in pixels.
- Press Convert. The formula line repeats the multiplication.
- Reset restores 1.5 rem at a 16 pixel root.
Formula / how it works
The formula. Pixels equal rem times the root. 1.5 times 16 is 24. 2 times 10 is 20. The result is rounded to three decimal places so 1.25 at a root of 16 is 20, and a third that does not divide evenly does not trail zeros forever. The root must be greater than 0 and at most 200. A zero root is refused because the multiplication would be a silent zero. A negative rem is allowed and the pixels come out negative, which you will notice.
What the browser actually does. The default root is 16px. A rule on the html element, or a user who set a larger default font, changes the root for that person. This converter cannot see that setting. Designers who set the root to 62.5 percent are working with a 10px root, and 1rem is then 10px, not 16. Type 10 if that is your sheet. The number here is the specification you typed, not a measurement of a live page.
Use. Convert a spacing token before you write a pixel fallback. Do not convert a whole stylesheet by hand if a build tool already does it. One pair at a time keeps the arithmetic visible. There is no px-to-rem switch on this form. Divide yourself, or type the rem you are testing.
Browsers default the root font to 16px unless a stylesheet or a user setting changes it. If your design sets html { font-size: 62.5% }, the root is 10px and 1.5rem is 15px, not 24. Type the root you actually ship. A user who enlarged text in the browser will not match this number, because this page does not read their settings. It multiplies the two numbers you typed. Negative rem is allowed and comes out negative, which is rarely useful and is not blocked.
Write the root next to the token in your notes. “1.5rem at 16 is 24” is a complete fact. “1.5rem is 24” is only true for that root. The formula line in the result repeats the multiplication so a screenshot carries the root with the pixels. If you change the root and forget to press Convert, the old pixels stay on screen. Press Convert after every edit. The form does not convert as you type. That pause is deliberate, so a half-edited root does not flash a wrong product. Store the root in the same note as the token name, otherwise a later reader will assume 16 and undo your 10px choice. A 24px result with no root written next to it will be “fixed” back to the wrong rem.
A token named space-3 that is 1.5rem should record the root beside it in the design note. The pixels are a consequence. They are not a second source of truth. When the root changes, reconvert. Do not edit the pixel number by hand and leave the rem stale.
Worked examples
One and a half at the usual root
Inputs: Rem: 1.5 | Root: 16
Leave rem at 1.5 and the root at 16, then press Convert. The pixels are 24.
Result: Rem: 1.5
Root: 16 px
Pixels: 24
Formula: pixels = rem × root font size.
Two rem at a 10 pixel root
Inputs: Rem: 2 | Root: 10
Set rem to 2 and the root to 10, then press Convert. The pixels are 20.
Result: Rem: 2
Root: 10 px
Pixels: 20
Formula: pixels = rem × root font size.
Use cases
- A pixel fallback for a 1.5rem padding.
- Checking a 10px root used by a 62.5 percent stylesheet.
- Showing the multiplication instead of a hidden conversion.
- Refusing a zero root rather than printing zero.
Tips & limitations
- Type the root you ship, not always 16.
- A user’s browser setting is not visible here.
- Negative rem is allowed and stays negative.
- Three decimal places is the rounding.
FAQ
What is the usual root?
16 pixels, unless a stylesheet or a user setting changed it. This page uses the root you type.
Why is 1.5rem equal to 24?
Because 1.5 times 16 is 24. Change the root and the pixels change.
Can the root be zero?
No. A root must be greater than 0 and at most 200.
Does this read my browser font size?
No. It multiplies the two numbers in the form.
Will 1 divided by 3 be endless?
The printed pixels stop at three decimal places.
Is anything uploaded?
No. The multiplication runs in the browser.
Runs entirely in your browser; nothing is uploaded. Check the output before you rely on it in production code, data or security decisions.