<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# 3. Typography Rules

**Font families:**

- **Headings:** `"Playfair Display", Georgia, "Times New Roman", "Noto Serif", serif`
- **Body:** `"Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif`
- **Monospace:** `"JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, monospace`

## Hierarchy

| Role | Font | Size | Weight | Line-Height | Letter-Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display | Serif | 52px / 3.25rem | 700 | 1.15 | -0.02em | Feature article headlines |
| H1 | Serif | 40px / 2.5rem | 700 | 1.2 | -0.015em | Article titles |
| H2 | Serif | 30px / 1.875rem | 700 | 1.25 | -0.01em | Section headers within articles |
| H3 | Serif | 24px / 1.5rem | 600 | 1.3 | -0.005em | Subsection headers |
| H4 | Sans-serif | 18px / 1.125rem | 600 | 1.4 | 0.01em | Minor headers, sidebar titles |
| Body | Sans-serif | 18px / 1.125rem | 400 | 1.7 | 0 | Primary reading text |
| Body Small | Sans-serif | 16px / 1rem | 400 | 1.6 | 0 | UI text, navigation |
| Caption | Sans-serif | 14px / 0.875rem | 400 | 1.5 | 0.01em | Image captions, metadata |
| Byline | Sans-serif | 14px / 0.875rem | 500 | 1.4 | 0.03em | Author names, dates |
| Pull Quote | Serif | 28px / 1.75rem | 400 | 1.4 | 0 | Italicised, indented block quotes |

**Principles:**

- Body text is 18px, not 16px — optimised for sustained reading
- Line-height of 1.7 provides generous inter-line spacing
- Content column: max-width 680px (approximately 65–75 characters per line)
- Paragraph spacing: 1.5em (margin-bottom on `<p>`)
- First-line indent OR paragraph spacing, never both
- Drop caps: optional on article opening, 3-line height, serif font, weight 400
