# Typography tokens

> The type scale and font primitives every component reads from — `--wr-text-*` sizes, `--wr-font-family-*` faces, plus weight, line-height, and letter-spacing scales. Looking for guidance on *how* to apply type in apps? See the [Typography](https://ngwr.dev/guides/typography) section instead — this page is the token reference.

Source: https://ngwr.dev/guides/tokens/typography  
Kind: Tokens, Reference

## Type scale

Nine `--wr-text-*` steps, named like a t-shirt scale and rooted at `--wr-text-base` (1rem = 16px). Reference the token, never a raw `px` — sizes then stay consistent and respond to a root `font-size` change in one place.

## Using the tokens

Pull sizes and faces straight from the custom properties. Pair `--wr-text-*` with a `--wr-leading-*` line-height and a `--wr-font-weight-*` weight for a complete type ramp.

```scss
.card-caption {
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-text-sm); /* 14px */
  font-weight: var(--wr-font-weight-medium);
  line-height: var(--wr-leading-normal);
  letter-spacing: var(--wr-tracking-normal);
}

.code-inline {
  font-family: var(--wr-font-family-mono);
  font-size: var(--wr-text-xs); /* 12px */
}
```

## Font families

The library ships only system-font fallback chains. Override these on `:root` to ship your own typeface — every component re-reads them, so one change reskins the whole catalog.

The quick brown fox jumps over the lazy dog — 0123456789

const x = 42; // the quick brown fox — 0123456789

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `--wr-font-family-base` | Default UI typeface. Apps shipping a custom face override this on `:root` after loading the theme. | `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | — |
| `--wr-font-family-mono` | Monospace face for code, numerics, and tabular data. | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` | — |

```scss
/* Ship your own typeface — override the family tokens on :root
   after loading the theme; every component re-reads them. */
:root {
  --wr-font-family-base: 'Inter', system-ui, sans-serif;
  --wr-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
}
```

## Font weights

A `--wr-font-weight-*` ramp from thin (200) to extrabold (800). Body copy sits at `regular` (400); labels and headings step up from there.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `--wr-font-weight-thin` | Thin. | `200` | — |
| `--wr-font-weight-light` | Light. | `300` | — |
| `--wr-font-weight-regular` | Regular — body default. | `400` | — |
| `--wr-font-weight-medium` | Medium — labels, emphasis. | `500` | — |
| `--wr-font-weight-semibold` | Semibold — subheadings. | `600` | — |
| `--wr-font-weight-bold` | Bold — headings. | `700` | — |
| `--wr-font-weight-extrabold` | Extrabold — display. | `800` | — |

## Line height

Unitless `--wr-leading-*` multipliers — they scale with the element's own font-size. `normal` (1.5) is the body default.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `--wr-leading-none` | No leading — tight display headings. | `1` | — |
| `--wr-leading-tight` | Tight. | `1.25` | — |
| `--wr-leading-snug` | Snug. | `1.375` | — |
| `--wr-leading-normal` | Normal — body default. | `1.5` | — |
| `--wr-leading-relaxed` | Relaxed. | `1.625` | — |
| `--wr-leading-loose` | Loose. | `2` | — |

## Letter spacing

`--wr-tracking-*` offsets in `em`, so tracking tracks the font-size. Tighten large display text, widen uppercase eyebrows and badges.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `--wr-tracking-tighter` | Tighter — large display text. | `-0.05em` | — |
| `--wr-tracking-tight` | Tight — headings. | `-0.025em` | — |
| `--wr-tracking-normal` | Normal — body default. | `0` | — |
| `--wr-tracking-wide` | Wide. | `0.025em` | — |
| `--wr-tracking-wider` | Wider. | `0.05em` | — |
| `--wr-tracking-widest` | Widest — uppercase eyebrows, badges. | `0.1em` | — |