What is rem in CSS? Why 1rem Often Equals 16px

1rem often equals 16px because rem is based on the root element's font size, and many browsers default the root font size to 16px. CSS does not hard-code rem to 16px. The real question is whether your design system should depend on changing the root font size.

What rem is relative to

rem means root em. It is relative to the font-size of the root element, usually html.

html {
  font-size: 16px;
}

.card-title {
  font-size: 1.5rem;
}

Here 1.5rem equals 24px. If the root font size becomes 18px, the same 1.5rem becomes 27px.

This is different from em, which is relative to the element's own computed font size and can compound through parent elements.

Why 1rem = 16px on many pages

Browsers commonly give html a default font size around 16px. If the page does not override it, then:

1rem = 16px

That is a default behavior, not an unchangeable rule.

Changing the rem base

You can change the root font size:

html {
  font-size: 18px;
}

That changes every size based on rem. This can be useful when:

• Your typography and spacing scale are designed in rem.
• You want to scale the whole interface.
• You understand how third-party components will respond.

It is risky when:

• The project mixes many fixed px, em, and rem values.
• You only want to adjust one local component.
• The team does not have shared design tokens.

Responsive root font size

You can also change the root size by breakpoint:

html {
  font-size: 16px;
}

@media (min-width: 1280px) {
  html {
    font-size: 18px;
  }
}

This scales a whole type and spacing system. For many responsive layouts, however, clamp(), container-aware layout, or design tokens are more precise than changing the root size.

The 62.5% trick

You may see:

html {
  font-size: 62.5%;
}

If the browser base is 16px, then 62.5% becomes 10px, making 1.4rem = 14px and 2.4rem = 24px.

This is not automatically wrong, but it should not be the default for every new project:

• Its main benefit is easier mental conversion back to pixels.
• Mature design systems usually rely on tokens and scale names, not hand conversion.
• Third-party components and browser defaults may need extra checking.

For new projects, a safer order is:

1. Keep the root font size close to the browser default.
2. Build typography and spacing with rem-based tokens.
3. Use clamp(), breakpoints, or component tokens where precision is needed.

Local font size does not change rem

.sidebar {
  font-size: 14px;
}

.sidebar p {
  font-size: 1rem;
}

The paragraph still uses the html root size. It does not use .sidebar as the rem base. If you want a child to scale with the parent font size, use em.

Good uses for rem

rem works well for:

• Global type scale.
• Spacing tokens.
• Component sizes that should scale with user font preferences.
• Interfaces that should remain readable when users adjust browser font size.

It is less suitable for:

• Pixel-perfect bitmap cropping.
• Dimensions that must follow a local parent font size.
• Sizes controlled by a component's internal algorithm.

Token-based setup

You do not have to change html first. Define meaningful tokens:

:root {
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

Now the team maintains a design scale instead of constantly converting 16 into pixel values.

Related FreeMac guides

• For inheritance and reset keywords, read CSS initial, inherit, and unset: How to Choose.
• For layout and animation performance, read Reflow and Repaint: Why CSS Animations Get Janky.
• For Tailwind spacing concepts, see Tailwind CSS Spacing: How the Scale Works.