Chapter 1 · Practice 2 of 4

Size text with rem and let layouts flex, instead of fixing pixel sizes

From Foundations: support, units and a sane base

Why it matters

Users change their browser's default font size for good reasons, usually readability. Text sized in px ignores that setting. Text sized in rem scales with it.

A practical split:

Use	For
`rem`	Font sizes, spacing that should grow with text
`em`	Padding or icons that should scale with the element's own font size
`%`, `fr`, `min()`, `max()`, `clamp()`	Widths and layout that adapt to space
`ch`	Readable line lengths, such as `max-width: 65ch`
`px`	Borders, hairlines and shadows that should stay crisp

Avoid fixed heights on anything that contains text. Content changes, translations get longer and users zoom in. Let height come from content and use min-height when you need a floor.

Example

CSS

:root {
  font-size: 100%; /* respect the user's browser setting */
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

.prose {
  max-width: 65ch; /* comfortable line length */
}

.card {
  padding: 1.5rem;
  min-height: 12rem; /* a floor, not a fixed height */
  border: 1px solid var(--color-border);
}