# Typography

Beyond the bare headings and paragraphs, a small set of helper classes covers
display type, supporting text, long-form prose, link treatments, and text
trimming. This is `typography.css` in `@layer base`.

## Display type

`.display` is oversized headline type (`--text-6xl`, semibold, very tight
leading and tracking) for hero headlines that should read bigger than an `<h1>`.
`.display.is-celebrate` bumps it one step larger (`--text-7xl`) for landing-page
moments.

```html
<h1 class="display">Ship it today</h1>
<h1 class="display is-celebrate">Welcome aboard</h1>
```

## Supporting text

- `.lede`: a larger, relaxed intro paragraph in `--ink-soft`, for the sentence
  under a headline.
- `.eyebrow`: a small uppercase, wide-tracked label in `--ink-dim`, for the
  kicker above a heading.

```html
<p class="eyebrow">Pricing</p>
<h2>Simple, per-seat</h2>
<p class="lede">Everything your team needs, one price.</p>
```

## Prose

`.prose` is the long-form container for editorial content, such as docs, blog
posts, anything with mixed headings, paragraphs, and lists. It sets a
comfortable measure and, unlike bare lists, **restores list markers** (discs and
decimals) and vertical rhythm between blocks. Apply it to the wrapper around
flowing content:

```html
<article class="prose">
  <h2>Getting started</h2>
  <p>Elements apps are built from pages…</p>

  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</article>
```

It manages spacing between children (`* + *`), tighter spacing after headings,
and generous space before `h2`/`h3`, so you don't hand-tune margins inside
prose.

## Link classes

Three link treatments for use outside `.prose`, where bare `<a>` is deliberately
plain:

| Class | Look |
|---|---|
| `.link-prose` | Underlined accent link (the in-prose default treatment) |
| `.link-action` | Medium-weight accent link, no underline until hover |
| `.link-muted` | Quiet `--ink-soft` link that brightens to `--ink` on hover |

```html
<a class="link-action" href="/docs">Read the docs</a>
<a class="link-muted" href="/legal">Terms</a>
```

## Clamping and truncation

- `.line-clamp-1` … `.line-clamp-6`: clamp text to N lines with an ellipsis.
- `.truncate`: clamp to a single line with an ellipsis (no wrapping).

```html
<p class="line-clamp-3">A long description that stops after three lines…</p>
<div class="truncate">a/very/long/path/that/gets/cut.txt</div>
```

## Text wrapping

- `.text-balance`: balances line lengths (`text-wrap: balance`), best for
  headings.
- `.text-pretty`: avoids orphans (`text-wrap: pretty`), best for paragraphs.

Both are also available as utilities (see [utilities](utilities)).