# Leading Tightens as Size Grows

**SHOULD** · **ID:** `content-leading-tracks-size` · **Category:** content
**Source:** [Emil Kowalski](https://emilkowalski.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-leading-tracks-size

> SHOULD: Set line-height inversely to font size — do not inherit one ratio everywhere. Large display type wants ~1.0–1.2 so wrapped lines cohere; body wants ~1.5–1.7. Give scripts with tall ascenders/descenders more, dense data UI less. Pair each type-scale step with its own ratio.

Set line-height inversely to font size — tight on large headings, generous on body — instead of one ratio for everything

From the typography section of Emil Kowalski's apple-design skill, and the complement to content-impeccable-tight-leading rather than a repeat of it. That rule sets the FLOOR — body copy wants 1.5 to 1.7 so lines do not crowd. This rule is about the slope: as size climbs, the ratio must come DOWN. The reason is that line-height is proportional, so a 1.5 that is perfect at 16px body becomes 72px of leading on a 48px headline — the two lines of a wrapped title drift so far apart they read as unrelated rows instead of one heading. Large display type wants roughly 1.0 to 1.2; a bare 1 is often right for a single-line hero. Because unitless line-height inherits as a multiplier, the practical implementation is a scale that pairs each size step with its own ratio, not one global `line-height` on `body`. Two edge cases from the source: scripts with tall ascenders and descenders (and any mixed-language UI) need MORE leading than Latin at the same size, and dense information UI (tables, compact lists) can go tighter than prose. Related: content-heading-size-descends, content-impeccable-type-scale-contrast, content-tracking-is-size-specific (its letter-spacing counterpart).

## Rule snippet

```tsx
h1 { font-size: 48px; line-height: 1.1; }
p  { font-size: 16px; line-height: 1.6; }
```

## Bad — do not do this

`content-leading-tracks-size-bad`

```tsx
export function LeadingTracksSizeBad() {
  return (
    <div className="w-full max-w-sm">
      {/* One line-height (1.6) inherited by every size */}
      <div className="rounded-lg border border-border bg-card p-5" style={{ lineHeight: 1.6 }}>
        <h4 className="max-w-[15rem] font-semibold text-foreground" style={{ fontSize: '28px' }}>
          Design that works while you sleep
        </h4>
        <p className="mt-2 text-sm text-muted-foreground">
          Set up once and let the automations run. Your workspace stays tidy without a nightly babysitter.
        </p>
      </div>
      <p className="mt-4 text-xs text-destructive">
        1.6 everywhere: the heading’s two lines drift apart and stop reading as one title.
      </p>
    </div>
  );
}
```

## Good — do this

`content-leading-tracks-size-good`

```tsx
export function LeadingTracksSizeGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="rounded-lg border border-border bg-card p-5">
        {/* Tight ratio on the large heading, roomy ratio on body */}
        <h4 className="max-w-[15rem] font-semibold text-foreground" style={{ fontSize: '28px', lineHeight: 1.1 }}>
          Design that works while you sleep
        </h4>
        <p className="mt-2 text-sm text-muted-foreground" style={{ lineHeight: 1.6 }}>
          Set up once and let the automations run. Your workspace stays tidy without a nightly babysitter.
        </p>
      </div>
      <p className="mt-4 text-xs text-success">
        Line-height scaled per size — ~1.1 on the heading holds it together, 1.6 keeps the body breathable.
      </p>
    </div>
  );
}
```

## References

- [Emil Kowalski — apple-design SKILL.md](https://raw.githubusercontent.com/emilkowalski/skills/main/skills/apple-design/SKILL.md)
- [MDN — line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)