# Headings & display

> The full heading ladder — display down to h6 — plus the oversized `display` variant for marketing hero rows.

Source: https://ngwr.dev/guides/typography/headings  
Kind: Directive

## Scale

Eight semantic sizes covering hero displays through compact h6 section headers. Tokens come from `--wr-text-*` and `--wr-leading-*` so a theme override re-tunes the whole ladder.

```angular-html
<h1 wrTypography variant="display">Display</h1>
<h1 wrTypography variant="h1">Heading 1</h1>
<h2 wrTypography variant="h2">Heading 2</h2>
<h3 wrTypography variant="h3">Heading 3</h3>
<h4 wrTypography variant="h4">Heading 4</h4>
<h5 wrTypography variant="h5">Heading 5</h5>
<h6 wrTypography variant="h6">Heading 6</h6>
```

## Marketing pair

Common combination: overline tag → display headline → lead subhead. The overline picks up a tone for emphasis.

```angular-html
<p wrTypography variant="overline" tone="primary">Pricing</p>
<h1 wrTypography variant="display">Built for every scale</h1>
<p wrTypography variant="lead" tone="medium">
  Start on the free tier and grow into a self-hosted seat the moment you outgrow it.
</p>
```

## See also

- [[wrTypography]](https://ngwr.dev/reference/directives/typography) — Every input, the full variant union, and the classes the directive emits.