What Are Relative Units?

Unlike absolute units (like pixels) that have a fixed size, relative units are calculated based on another value — usually the font size of a parent element or the root element. This makes your designs more flexible, scalable, and accessible.

The em Unit

The em unit is relative to the font size of the current element (or its parent, for the font-size property itself).

CSS

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;    /* 1.5 x 16px = 24px */
  padding: 1em;         /* 1 x 24px = 24px (uses own font-size) */
  margin-bottom: 0.5em; /* 0.5 x 24px = 12px */
}

Important: em for font-size vs other properties

When used for font-size: em is relative to the parent's font size
When used for other properties (padding, margin, width): em is relative to the element's own font size

CSS

.box {
  font-size: 20px;  /* Set the element's font size */
  padding: 1em;     /* 1 x 20px = 20px (uses own font size) */
  margin: 2em;      /* 2 x 20px = 40px (uses own font size) */
}

The Compounding Problem

The biggest issue with em is that it compounds (multiplies) through nested elements:

CSS

.level-1 { font-size: 1.5em; } /* 1.5 x 16px = 24px */
.level-2 { font-size: 1.5em; } /* 1.5 x 24px = 36px */
.level-3 { font-size: 1.5em; } /* 1.5 x 36px = 54px */

HTML

<div class="level-1">
  24px text
  <div class="level-2">
    36px text (not 24px!)
    <div class="level-3">
      54px text (keeps growing!)
    </div>
  </div>
</div>

This compounding effect can cause unexpected sizing in deeply nested elements.

The rem Unit

rem stands for root em. It is always relative to the root element's font size (the html element), regardless of nesting:

CSS

html { font-size: 16px; } /* Root font size */

h1 { font-size: 2rem; }     /* 2 x 16px = 32px */
h2 { font-size: 1.5rem; }   /* 1.5 x 16px = 24px */
p { font-size: 1rem; }       /* 1 x 16px = 16px */
.small { font-size: 0.875rem; } /* 0.875 x 16px = 14px */

rem Doesn't Compound

CSS

.level-1 { font-size: 1.5rem; } /* 1.5 x 16px = 24px */
.level-2 { font-size: 1.5rem; } /* 1.5 x 16px = 24px */
.level-3 { font-size: 1.5rem; } /* 1.5 x 16px = 24px */
/* Always the same, regardless of nesting! */

em vs rem: When to Use Each

Use rem for:

Font sizes — consistent sizing that doesn't compound
Global spacing — margins and padding that should be consistent across components
Media query values — breakpoints that respect user font preferences

CSS

body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.section { padding: 3rem 0; }
.container { max-width: 75rem; }

Use em for:

Component-internal spacing — padding and margins that should scale with the component's font size
Button padding — so buttons scale proportionally with their text
Icon sizing — icons that should match text size

CSS

.button {
  font-size: 1rem;
  padding: 0.5em 1.5em;  /* Scales with button text size */
  border-radius: 0.25em; /* Scales proportionally */
}

.button-large {
  font-size: 1.25rem;
  /* padding and border-radius automatically scale up */
}

.button-small {
  font-size: 0.875rem;
  /* padding and border-radius automatically scale down */
}

The 62.5% Trick

Some developers set the root font size to 62.5% to make rem calculations easier:

CSS

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

body {
  font-size: 1.6rem; /* 16px */
}

h1 { font-size: 3.2rem; } /* 32px */
h2 { font-size: 2.4rem; } /* 24px */
.card { padding: 2rem; }   /* 20px */

Now 1rem = 10px, making the math much simpler. However, this technique requires setting the body font size explicitly.

Accessibility Benefits of Relative Units

The main reason to use relative units for font sizes is accessibility. Users can change their browser's default font size in settings. With relative units, your text scales accordingly:

CSS

/* BAD: Won't respect user preferences */
p { font-size: 16px; }

/* GOOD: Scales with user preferences */
p { font-size: 1rem; }

If a user increases their default font size from 16px to 20px:

px-based text stays at 16px (ignoring the user's preference)
rem-based text scales to 20px (respecting the preference)

This is critical for users with low vision who need larger text.

Combining rem and em

A common professional pattern uses rem for font sizes and em for component spacing:

CSS

.card {
  font-size: 1rem;       /* rem: consistent base size */
  padding: 1.5em;        /* em: scales with card's text */
  margin-bottom: 2rem;   /* rem: consistent spacing between cards */
}

.card-title {
  font-size: 1.25rem;    /* rem: predictable heading size */
  margin-bottom: 0.5em;  /* em: spacing proportional to title size */
}

Summary

The em unit is relative to the element's own font size (or parent for font-size), making it ideal for component-internal spacing that should scale proportionally. The rem unit is always relative to the root font size, making it predictable and immune to compounding. Use rem for font sizes and global spacing, and em for component-level proportional sizing. Both are essential for building accessible, scalable websites.