Size-specific tracking

Tighten tracking and leading as type grows; body stays near 0 and 1.5.

From apple-design, §15, after The Details of UI Typography, WWDC 2020 ↗.

One value is wrong somewhere

Drag the size from 12 to 72px.

Fixed spacingBad

letter-spacing: 0.05em; line-height: 1.5
Size-specific spacingGood

letter-spacing: -0.020em; line-height: 1.08

Hierarchy beyond size

Shrink the title, then toggle each lever off.

Size onlyBad

Q3 close

Revenue up 12% on annual renewals

Three accounts drove most of the change

Renewals moved from monthly to annual billing in August. Deferred revenue rose with them, so cash leads recognized revenue by about six weeks.

Updated 2h ago

font-weight: 400; line-height: 1.5
Weight, size, leadingGood

Q3 close

Revenue up 12% on annual renewals

Three accounts drove most of the change

Renewals moved from monthly to annual billing in August. Deferred revenue rose with them, so cash leads recognized revenue by about six weeks.

Updated 2h ago

font-weight: 700; line-height: 1.15

Space in rem so text grows

Raise the text size like a reader would.

Boxes in pxBad

Acme Corp

Invoice 1042 due Friday

Overdue
height: 72px; width: 64px; padding: 12px
Boxes in rem / emGood

Acme Corp

Invoice 1042 due Friday

Overdue
min-height: 4.5em; padding: .75em 1em

Why it matters, pros and cons

Why it matters

Spacing is judged by eye. Caption gaps fall apart at display size.

Pros

  • Headlines hold together; captions stay legible.
  • Hierarchy survives when sizes are close.
  • Layout survives 200% text instead of clipping.

Cons

  • Values are per typeface; retune for each font.
  • All-caps labels want positive tracking at any size.
  • CJK and Devanagari want more leading, no negative tracking.