# Typography — BBC Golden Hour

Five typefaces. Each has one job. Mixing jobs is the fastest way to break the system.

## The five faces

| Face | Family | Weight(s) | Used for |
|---|---|---|---|
| Display | League Spartan | 300, 400, 500, 700, 800, 900 | Hero headlines, stat numbers, cover slides — always uppercase |
| Body | DM Sans | 300, 400, 500, 600, 700, 800, 900 | Body, UI, eyebrows, buttons, captions — primary workhorse |
| Elegant | Cormorant Garamond | 400, 500, 600 + italic 400 | Section titles, pull quotes, editorial moments |
| Script | Caveat | 400, 700 | Personal/handwritten flourishes — rare, never structural |
| Mono | DM Mono | 400, 500 | Code, hex values, technical labels |

Google Fonts import (use this exactly):

```html
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700;800;900&family=League+Spartan:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
```

## Fluid type scale

Use `clamp()` for responsive output. Do not use fixed px on web/emailer.

| Token | Value | Use |
|---|---|---|
| `--type-hero` | `clamp(40px, 9vw, 96px)` | Cover slide / hero headline |
| `--type-h1` | `clamp(38px, 8vw, 84px)` | Section opener |
| `--type-h2` | `clamp(28px, 6vw, 64px)` | Major heading |
| `--type-h3` | `clamp(22px, 5vw, 36px)` | Sub-heading |
| `--type-lede` | `clamp(15px, 2vw, 24px)` | Lede paragraph below headline |
| `--type-body` | `clamp(14px, 1.6vw, 18px)` | Body copy |
| `--type-caption` | `clamp(10px, 1.2vw, 14px)` | Eyebrow, label, caption |

For fixed-canvas decks (1920×1080), use absolute px from samples — see `samples/bbc-deck-1920x1080.html`.

## The headline pattern

This is the BBC signature move:

```html
<h1 style="font-family:var(--font-display); font-weight:900; font-size:var(--type-hero);
           line-height:.85; text-transform:uppercase; color:var(--white);">
  We don't build brands.
  <span class="bbc-gradient-text">We build systems<br>that make them inevitable.</span>
</h1>
```

Rules:
- White/cream first phrase, gradient-clipped accent phrase
- Always uppercase for display-tier text
- `line-height: 0.85` on display headlines (tight)
- Letter-spacing ≈ -1px to -3px on large headlines (tighter at bigger sizes)
- Never gradient-clip a full long sentence — it becomes illegible

## The eyebrow

Almost every section has an eyebrow above the headline:

```html
<p class="bbc-eyebrow" style="color:var(--white); opacity:.5;">How we started</p>
```

- DM Sans 700 uppercase
- 5px letter-spacing for normal, 10px for emphasized
- 50% opacity on dark surfaces, 100% on light
- Often centered above the headline, sometimes left-aligned with it

## Body copy

- DM Sans **300** for lede paragraphs (lighter, more elegant)
- DM Sans **400** for standard body
- DM Sans **500** for emphasis within body
- Line-height 1.5 for body, 1.15–1.3 for ledes

## Cormorant Garamond — when

Use Cormorant Garamond italic 400 for:
- Pull quotes inside long-form documents
- Editorial intro phrases ("A note on what we mean by…")
- Section titles in elegant/proposal-style decks
- Never for body or UI

## Caveat — when

Use Caveat 700 for:
- Handwritten signature on the closing slide
- A single highlighted word or short phrase that breaks the formal tone (rare)
- "P.S." moments in emailers
- Never for headlines or body

## Anti-patterns

- ❌ Tailwind's default `font-sans` (system stack) — always specify League Spartan, DM Sans, etc.
- ❌ Mixing display weights inside one headline (don't put 400 next to 900 in same line)
- ❌ All-caps body paragraphs
- ❌ Cormorant for everything (it's a flourish, not a workhorse)
- ❌ Tracking-tight on small text — kerning gets ugly