Typography (and Font Recommendations)
Typography is the highest ROI UI layer. If reading is effortless, people move and click.
| Style | Size | Line-height | Weight | Use |
|---|---|---|---|---|
| H1 | clamp(30px, 3.2vw, 44px) | 1.12 | 750 | One per page |
| H2 | clamp(24px, 2.2vw, 32px) | 1.18 | 750 | Primary sections |
| H3 | clamp(20px, 1.6vw, 24px) | 1.25 | 750 | Sub-sections |
| Body | 16px | 1.55 | 400–500 | Main reading |
| Small | 13px | 1.45 | 400–500 | Meta, captions |
- Reading measure: 68ch for paragraphs
- Sentence case: for labels and buttons
- Never center long text: scan speed drops
- Headings must be literal: “Buttons” beats “Make it pop”