About the PX to REM Converter
Rem units are sized against the root element, so a layout built in rem scales as a whole when someone raises the browser font size. That is the main reason design systems ask for rem while designers hand over pixel measurements. This converter closes the gap: paste the pixel numbers from the spec and read back the rem equivalents.
The maths is a plain division by the root font size, which browsers set to 16px unless a stylesheet overrides it. So 24px becomes 1.5rem, 14px becomes 0.875rem and 10px becomes 0.625rem. If your project resets the root to another value, change the base font size field and every line recalculates against it.
Awkward pixel numbers produce long decimals, for instance 13px is 0.8125rem. Those are exact and perfectly safe to ship, though many teams prefer to snap the design to a multiple of two or four first. Borders of one pixel are usually left in pixels on purpose, since a hairline should not thicken when a reader scales text up. To read a rem value back as pixels, use REM to PX.
How to use
- Paste the pixel values, one per line.
- Set Base font size if your root is not 16px.
- Copy the rem values into your stylesheet.
- Keep the printed table for the sizes you use often.
Common questions
- What is 16px in rem?
- Exactly 1rem when the root font size is the default 16px.
- Should I use rem for everything?
- Use it for type, spacing and radii so the interface scales with user settings. Hairline borders and media query breakpoints are commonly left in pixels.
- My root font size is not 16px. What then?
- Enter your real root value in the base font size field and the conversion follows it.
- Are long decimals like 0.8125rem a problem?
- No. Browsers handle them fine and the value is exact, so nothing is lost.