If you have written CSS for any amount of time, you have used px. It is simple, predictable, and easy to understand. But there is a better unit for most use cases — rem — and once you understand how it works, you will rarely go back to raw pixels.

This guide explains what rem is, how px-to-rem conversion works, why rem is better for accessibility and responsiveness, and how to set up your CSS so the math stays simple.

What is rem?

The rem unit stands for root em. It is always relative to the font size of the root element — the <html> tag. By default, browsers set that root font size to 16px.

So with default browser settings:

rem vs em: em is relative to the font size of the parent element, which makes it unpredictable in deeply nested components. rem always refers to the root, so it is consistent everywhere.

The conversion formula

Converting from px to rem is straightforward:

rem = px ÷ root font size

/* Example with 16px root (browser default) */
24px ÷ 16 = 1.5rem
32px ÷ 16 = 2rem
14px ÷ 16 = 0.875rem

If you change the root font size to something other than 16px, you use the same formula with the new base value.

Common conversion table

PX value REM (base 16px) REM (base 10px)
8px0.5rem0.8rem
12px0.75rem1.2rem
14px0.875rem1.4rem
16px1rem1.6rem
20px1.25rem2rem
24px1.5rem2.4rem
32px2rem3.2rem
48px3rem4.8rem
64px4rem6.4rem

The 62.5% trick for cleaner math

Many developers find the default 16px base awkward — 14px = 0.875rem is not great to type. A common solution is to set the root font size to 10px, which makes the math trivial:

html {
  /* 62.5% of 16px browser default = 10px */
  font-size: 62.5%;
}

body {
  /* Reset body to a readable size */
  font-size: 1.6rem; /* = 16px */
}

h1 {
  font-size: 3.2rem; /* = 32px */
}

p {
  font-size: 1.4rem; /* = 14px */
}

Now every rem value is just the pixel value divided by 10 — simple mental math with no calculator needed.

Why 62.5%? Using a percentage instead of a fixed value like font-size: 10px is important. A percentage respects the user's browser font size preference — a fixed px value overrides it entirely, which hurts accessibility.

Why rem is better than px for most use cases

1. Accessibility

Many users increase the default browser font size in their settings — especially those with visual impairments. If you use px for font sizes, those user preferences are ignored. rem scales with the root, so your typography respects the user's choice.

2. Consistent scaling

With rem, you can scale the entire UI — fonts, spacing, padding — by changing just one value: the root font size. This is useful for responsive designs where you want everything to proportionally shift at breakpoints.

/* Scale everything down slightly on small screens */
@media (max-width: 480px) {
  html {
    font-size: 55%;
  }
}

3. Easier maintenance

When your design system uses rem throughout, one change to the root propagates everywhere. With raw px values scattered across your stylesheet, a global size adjustment requires hunting down every single declaration.

When to still use px

Rem is not always the right choice. Use px for:

Summary

Use rem for font sizes and spacing in your design system. It scales with the user's browser preferences, makes global sizing adjustments trivial, and produces more accessible interfaces. The 62.5% trick on the root element makes the numbers easier to work with in day-to-day development.

For borders, shadows, and deliberate fixed-size elements, stick with px.

Need to convert px values quickly?

Use our free PX to REM converter — enter any px value and get the rem equivalent instantly. Supports bulk conversion and custom base font sizes.

Open PX to REM Converter →