PX to REM Converter

How do you convert px to rem?

To convert px to rem, divide the pixel value by the root font size. The formula is rem = px / root, where the root defaults to 16px. So 24px is 1.5rem and 32px is 2rem. A rem's relative to the page root, not to the parent element like em, so it stays predictable wherever you use it.

Here's a worked example. You've designed a heading at 28px and you want it in rem at the default 16px root. Divide 28 by 16 and you get 1.75rem. If your design uses a 20px body size and you'd rather express that as 1.25rem, the math is the same: 20 divided by 16. Most CSS values you'll meet, like 12px, 14px, 16px and 18px, land on clean fractions once you divide by 16, which is why so many teams keep the root at the browser default.

PX to REM reference table (16px root)

This table assumes the standard 16px root. If you've changed the root, the converter above gives you the exact figure, but these common pixel sizes cover most type and spacing decisions.

How to use this px to rem converter

1. Type your pixel value into the converter, for example 24.
2. Check the root font size field. It's preset to 16px, the browser default.
3. If your project uses a different root, enter it, such as 18 or 20.
4. Read the rem result the tool returns, along with the rem = px / root formula.
5. Copy the rem value straight into your CSS, like font-size: 1.5rem.

You don't need to clear the field between conversions. Change the pixel input and the rem result updates as you type, so you can run through a whole type scale in a few seconds.

Why use rem instead of px?

rem scales with the user's root font size, so your layout respects browser zoom and accessibility preferences. Fixed pixels ignore those settings. When someone bumps their default browser font from 16px to 20px for easier reading, every rem-based size grows with it, while px-based text stays locked at the original size and can stay too small.

That difference matters more than it looks. Roughly 1 in 4 US adults lives with some form of vision difficulty, and many raise their default font size rather than zoom the whole page. Building type and spacing in rem is the accessible default in modern CSS, and it's why WCAG guidance leans on resizable text. You'll also find rem keeps a design consistent: change the root once and the entire scale shifts together, instead of you hunting through hundreds of fixed pixel values.

Setting a custom root font size

The root font size is the font-size set on the html element, and 16px is the browser default. When you change it, every rem on the page recalculates against the new number. If you set the root to 10px with html font-size: 62.5%, then 1rem becomes 10px and the px-to-rem math turns into a simple divide-by-10. So 24px is 2.4rem, and 18px is 1.8rem, which some developers prefer for quick mental conversion.

Be careful with one common trap. Setting the root in pixels with html font-size: 10px overrides the user's chosen default and can shrink text below what they picked, which undoes the accessibility benefit. The percentage approach, 62.5%, scales from whatever the reader set, so it stays accessible. Whatever root you choose, enter the same number in the tool's root field and the converter matches your stylesheet exactly.

Is rem a physical unit?

No. rem is a CSS relative length unit, not a physical unit like inches or millimeters. It doesn't map to a fixed real-world size and it doesn't depend on screen DPI. One rem equals whatever the root font size resolves to in CSS pixels, so it shifts with the root rather than with the display hardware. That's the key distinction from feet, inches or points, which describe physical measurements. If you need a true physical conversion instead, the point-based tool handles print units.