PX to REM: Why It Matters and How to Convert

Most CSS you write uses px: 16px font, 24px padding, 8px gap. It works, and it looks fine on your screen. But px has a quiet flaw: it is absolute. It ignores the font-size preference of the person reading your site. REM units fix that, and converting between the two is one division.

What REM actually is

REM stands for root em. One rem equals the font size of the root element, the html tag. Browsers default that to 16px, so 1rem = 16px, 1.5rem = 24px, and 0.5rem = 8px. The formula is simple:

rem = px / root font-size

24px / 16 = 1.5rem
32px / 16 = 2rem
12px / 16 = 0.75rem

Unlike em, which compounds relative to the parent element and gets confusing fast, rem always refers to the root. That makes it predictable: 1.5rem means the same thing everywhere in your stylesheet.

Why REM matters: accessibility

Here is the scenario that makes REM worth adopting. A user with low vision goes into their browser settings and sets their default font size to 20px or 24px. Every rem-based size on your page scales up with that setting: text gets bigger, spacing grows to match, and the layout stays coherent. Pixel-based sizes do not budge. Your 16px text stays 16px no matter what the user asked for.

Browser zoom is not the same thing. Zoom scales everything, including px. But many users do not know about zoom, or use the font-size setting instead, and users on mobile rely on system text-size settings that only affect relative units. Designing in rem respects the settings people actually use.

Converting in practice

In a stylesheet, the conversion looks like this. The two blocks below produce the same result at the default 16px root size, but only the rem version adapts when the user changes their font size:

/* Pixels: fixed, ignores user font-size setting */
.card {
  padding: 24px;
  font-size: 16px;
  border-radius: 8px;
}

/* REM: scales with the user's font-size setting */
.card {
  padding: 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

If your project changes the root font size, the conversion changes with it. With html set to 18px, 24px becomes 24 / 18 = 1.333rem. If you use 62.5% on the root — a common trick that makes 1rem = 10px — then 24px is simply 2.4rem. Whatever base you choose, keep it consistent across the project. Component libraries and design systems usually pick one convention and document it, because mixing bases across a codebase turns every conversion into a guessing game.

When PX is still the right call

REM is not a religion. Borders, hairline dividers, and box shadows usually belong in px: a 1px border should stay 1px even when the user scales their text, or it starts looking chunky. Media query breakpoints are also typically written in px or em, since rem in media queries behaves inconsistently across browsers. The practical rule: use rem for anything that scales with text — font sizes, padding, margins, gaps — and px for fixed details.

Try it

Convert any value with the PX to REM Converter — set your root size and get the rem value instantly. Spacing is one half of consistent design tokens; the other half is color, so the Color Converter covers HEX, RGB, and HSL in one place. More practical guides: How to Convert HEIC Photos to JPG.