Which unit to reach for in CSS

Absolute units ignore the reader; relative ones do not.

:root { font-size: 100%; }

.prose {
  font-size: 1.125rem;
  max-width: 68ch;
  line-height: 1.6;
  margin-block: 2rem;
}

.badge {
  font-size: 0.75rem;
  /* padding in em stays proportional to this font size */
  padding: 0.25em 0.6em;
  border-radius: 999px;
}

.hero {
  min-height: 60svh;
  padding-inline: max(1rem, 4vw);
}

How it works

1. rem is the root font size, so it scales with the user's setting.
2. em compounds: it is the element's own font size, which nests badly.
3. ch sizes to a character, which is what a line length really wants.

Keywords and builtins used here

• badge
• ch
• em
• hero
• max
• padding
• prose
• px
• rem
• vw

The run, in numbers

Lines

20

Characters to type

310

Tokens

74

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 59 seconds.

Type this snippet

Step 1 of 3 in Values & units, step 20 of 26 in Selectors & the box model.

← Previous Next →