# Typography

Font families, type scale, weights, and specimens.

## Font families

| Token | Family | Usage |
|---|---|---|
| `--font-display` | Fraunces | Headings, brand wordmark |
| `--font-body` | DM Sans | Body text, UI labels, buttons |
| `--font-mono` | IBM Plex Mono | Code, badges, metadata labels |

Fraunces is a display serif with optical size variation. It is used for headings only — never body text. DM Sans is a geometric sans-serif optimised for screen readability. IBM Plex Mono is IBM's open-source monospace, consistent with the technical/operational character of the product.

## Type scale

| Token | Size | Usage |
|---|---|---|
| `--text-xs` | 0.75rem (12px) | Metadata labels, badges, captions |
| `--text-sm` | 0.875rem (14px) | Body text, sidebar links |
| `--text-base` | 1rem (16px) | Default body, buttons |
| `--text-lg` | 1.125rem (18px) | Subheadings |
| `--text-xl` | 1.25rem (20px) | Section headings (h2) |
| `--text-2xl` | 1.5rem (24px) | Page headings (h1 in cards) |
| `--text-4xl` | 2.25rem (36px) | DocsLayout h1 |

## Font weights

| Token | Value | Usage |
|---|---|---|
| `--font-weight-normal` | 400 | Body text |
| `--font-weight-medium` | 500 | Active nav links |
| `--font-weight-semibold` | 600 | Labels, table headers |
| `--font-weight-bold` | 700 | Headings |

## Line height

| Token | Value |
|---|---|
| `--leading-tight` | 1.25 |
| `--leading-snug` | 1.375 |
| `--leading-relaxed` | 1.625 |