# Typography

The system font, five sizes and three weights.

The system font stack: fast, familiar on every device, and no web font to download.

```html
<h1>Page title, 24px</h1><h2>Section heading, 20px</h2><h3>Sub-heading, 16px bold</h3><p>Body text, 16px, line height 1.5.</p><p class="at-small at-muted">Small muted text, 14px, for hints.</p>
```

| Token | Size | Use for |
|---|---|---|
| `--at-text-xl` | 24px | Page title (h1) and the page header title |
| `--at-text-lg` | 20px | Section heading (h2) |
| `--at-text-md` | 16px | Body text, inputs |
| `--at-text-sm` | 14px | Buttons, tables, hints |
| `--at-text-xs` | 12px | Tags |

Weights: `--at-weight-regular` (400) for text, `--at-weight-bold` (600) for labels, buttons and emphasis, and `--at-weight-heavy` (700) for headings only, so the top of every screen is clear. Line height: `--at-line-height` (1.5). Helpers: `at-small`, `at-muted`. Do not load web fonts, use other weights, or write in capitals.