CSS Academy · Lesson

Relative Units: em and rem

Size elements relative to parent or root font sizes using em and rem units.

Relative Units: em and rem is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What are Relative Units?

Relative units scale based on another measurement — usually the font size of an element or the root. They enable scalable, responsive designs that respect user settings.

em — Relative to Parent Font Size

em is relative to the font-size of the current element (for font-size itself) or the parent element (for other properties). This can cause compounding.

.parent { font-size: 20px; }
.child  { font-size: 1.5em; } /* 20 * 1.5 = 30px */
.grandchild { font-size: 1.5em; } /* 30 * 1.5 = 45px! */

em for Spacing

When em is used for padding, margin, or border-radius, it is relative to the element's own font-size. This creates components that scale proportionally.

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

rem — Relative to Root Font Size

rem (root em) is relative to the root element's font-size (html). It never compounds and is predictable throughout the page.

html { font-size: 16px; }

p   { font-size: 1rem;    }  /* always 16px */
h1  { font-size: 2.5rem;  }  /* always 40px */
small { font-size: 0.75rem; } /* always 12px */

rem and User Accessibility

If the user increases the browser base font size (e.g. from 16px to 20px for readability), rem units scale accordingly. Fixed px units do not. This is why rem is strongly recommended for typography.

html font-size in Percentages

Set the root font-size as a percentage to respect user browser settings:

html {
  font-size: 100%; /* = browser default, usually 16px */
}
/* Never set html { font-size: 16px } — it defeats user preferences */

em vs rem Choosing

Practical guide:

Use rem for font sizes, spacing tokens, and layout measurements
Use em for component-internal spacing that should scale with the component's font size (e.g. padding on a button)

em in Media Queries

Media queries specified in em respond to browser font size changes. A 48em breakpoint = 768px at default settings but adapts if the user has changed their base font size.

@media (min-width: 48em) {
  .layout { display: grid; }
}

Calculating em

The formula: desired px / parent px = em value. If parent is 16px and you want 24px text: 24/16 = 1.5em.

p { font-size: 1.125rem; }  /* 18/16 */
h2 { font-size: 1.5rem; }   /* 24/16 */

Compound em Problem

Nesting em-sized elements causes font-size to compound multiplicatively. This is why rem is preferred for font-size — it always references the root, preventing compounding.

ch — Character Width

The ch unit equals the width of the "0" character in the current font. Useful for constraining text containers to readable line lengths:

.article-body {
  max-width: 70ch; /* ~70 characters per line */
}

Quick Check

A button has font-size: 1.25rem and padding: 0.5em. If the root font-size is 16px, what is the padding in pixels?

Recap

em scales relative to the current element's font-size (or parent for font-size itself) — it can compound. rem always scales relative to the root and never compounds. Use rem for typography and global spacing; use em for proportional component-internal spacing.

Frequently asked questions

Is the “Relative Units: em and rem” lesson free?

Yes — the full text of “Relative Units: em and rem” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Relative Units: em and rem”?

Size elements relative to parent or root font sizes using em and rem units. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Relative Units: em and rem” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy