# Typography

IO uses Apple's SF Pro font system via system font stack.

## Font Stack

```css
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif
```

## Type Scale

| Class | Size | Weight | Usage |
|---|---|---|---|
| `.text-hero` | 80px (clamp 48px) | 700 | Hero headlines |
| `.text-display` | 56px (clamp 32px) | 700 | Display headings |
| `.text-title1` | 48px (clamp 24px) | 700 | Section titles |
| `.text-title2` | 28px | 700 | Subsection titles |
| `.text-title3` | 21px | 600 | Card headings |
| `.text-headline` | 17px | 600 | Bold body text |
| `.text-body` | 17px | 400 | Body copy |
| `.text-subhead` | 15px | 400 | Smaller body |
| `.text-footnote` | 13px | 400 | Fine print |
| `.text-caption` | 12px | 400 | Captions |
| `.text-label` | 11px | 500 | Uppercase labels |

## Letter Spacing

- Hero/Display: -0.003em (very tight)
- Body: -0.022em (slightly tight — Apple standard)
- Labels: 0.06em (wide — for uppercase readability)