`, `
` or `` you already have, pick a variant, and it applies the shared `--wr-text-*` / `--wr-font-weight-*` / `--wr-leading-*` tokens by binding a class.
Source: https://ngwr.dev/reference/directives/typography
Kind: Directive
## Why ngwr provides this
Type is the one system every screen touches, and hand-rolled heading styles drift apart the moment two people write CSS. Routing every text role through one directive means a theme override re-skins the whole app, and the roles stay a closed set instead of a pile of one-off classes.
## Selector
Attribute directive — it styles the host element, never replaces it.
## Inputs
The complete surface — five inputs, no outputs, no public methods.
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `variant` | The text role. Drives size, weight, leading and — for some variants — colour. `code` additionally implies `mono`. | `WrTypographyVariant` | `'body'` |
| `tone` | Colour override. `null` emits no tone class at all, leaving each variant its own colour — body and headings read `--wr-color-on-surface`, `lead` / `caption` / `overline` are muted, `link` is primary. Set a tone only to depart from that. | `WrTypographyTone \| null` | `null` |
| `align` | Horizontal alignment. `null` emits no class, so the element inherits alignment from its container. | `WrTypographyAlign \| null` | `null` |
| `truncate` | Clip overflow to one line with an ellipsis. Coerced, so the bare attribute works. Forces `display: inline-block` on the host. | `boolean` | `false` |
| `mono` | Switch to `--wr-font-family-mono`. Coerced, so the bare attribute works. Implied by `variant="code"`. | `boolean` | `false` |
## Variants
`WrTypographyVariant` in full. Several carry their own colour, which is what `tone: null` preserves.
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `display` | Hero headline. The only fluid size. | `clamp(--wr-text-4xl, 6vw, 3.75rem)` | — |
| `h1 … h6` | The heading ladder. | `--wr-text-3xl … --wr-text-base` | — |
| `lead` | Intro paragraph under a heading. | `--wr-text-lg · muted` | — |
| `body` | Default. Running text. | `--wr-text-base` | — |
| `small` | Small print. | `--wr-text-sm` | — |
| `caption` | Captions, helper text. | `--wr-text-xs · muted` | — |
| `overline` | Section label above a heading. | `--wr-text-xs · uppercase · muted` | — |
| `code` | Inline code. Implies `mono`; sized in `em` so it tracks its context. | `tinted inline chip · 0.875em` | — |
| `list` | Applies to the list element itself; markers and nesting are styled from the element type. | `ul / ol / dl aware` | — |
| `link` | Inline link styling. | `primary` | — |
## Emitted classes
The directive binds `[class]` to a single computed string. Useful when you need to target its output from your own stylesheet.
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wr-typography` | Base class. Sets margin, font family, and `--wr-color-on-surface`. | `always` | — |
| `wr-typography--{variant}` | One per variant — always emitted, since `variant` always resolves. | `always` | — |
| `wr-typography--tone-{tone}` | Omitted entirely when `tone` is `null`. | ``when `tone` is set`` | — |
| `wr-typography--align-{align}` | Omitted entirely when `align` is `null`. | ``when `align` is set`` | — |
| `wr-typography--truncate` | Adds the ellipsis clamp. | ``when `truncate``` | — |
| `wr-typography--mono` | The one implicit rule in the directive. | ``when `mono` or `variant="code"``` | — |
## See also
- [Typography guide](https://ngwr.dev/guides/typography/overview) — The variants applied to real headings, paragraphs, links, lists and code.
- [Typography tokens](https://ngwr.dev/guides/tokens/typography) — The `--wr-text-*` scale and font primitives this directive reads.
- [Theming](https://ngwr.dev/guides/theming) — Retuning those tokens across the app.