Typography

CSS utility classes and adjacent-selector defaults for the role-based typography system. Per ADR-0009.

Two surfaces:

Utility classes — apply a typography role to any element: <h1 class="font-display-hero">…</h1>.
Adjacent-selector defaults — inside <main> and <article>, h1–h4, p, small, figcaption adopt sensible default roles automatically so authors writing standard HTML get correct typography without classes.

Classes

Display group (fluid display sizes per ADR-0009)

Class	Role	Approx
`.font-display-hero`	Landing hero	72px
`.font-display-statement`	Section-level statement	48px
`.font-display-title`	Page title emphasis	32px

Heading group (in-document)

Class	Role	Tag default
`.font-heading-title`	H1 inside article	`main h1`, `article h1`
`.font-heading-section`	H2 inside article	`main h2`, `article h2`
`.font-heading-subsection`	H3 inside article	`main h3`, `article h3`
`.font-heading-group`	H4 inside article	`main h4`, `article h4`

Body group

Class	Role	Tag default
`.font-body-lead`	Lead paragraph	`main p.lead`
`.font-body-regular`	Standard body copy	`main p`
`.font-body-support`	Supporting text	—
`.font-body-caption`	Small annotations	`main small`, `main figcaption`

Special

Class	Role
`.font-overline`	Eyebrows / labels (UPPERCASE)
`.font-mono`	Inline / block monospace

Anatomy

<!-- Default in-document typography (no classes needed) -->
<main>
  <h1>Page title</h1>
  <p class="lead">A lead paragraph stands out.</p>
  <p>Standard body copy.</p>
  <h2>Section heading</h2>
  <p>More body copy. <small>A footnote.</small></p>
</main>

<!-- Override default to display-hero for landings -->
<main>
  <h1 class="font-display-hero">A semantic design system.</h1>
  <p class="font-body-lead">For humans and AI agents.</p>
</main>

<!-- Overline above a title -->
<div>
  <span class="font-overline">v1.0 launch</span>
  <h1 class="font-display-statement">Bigger ideas.</h1>
</div>

Tokens used

All font-{role}-* semantic tokens. See ADR-0009 for the full role inventory.

Accessibility

Default tag mappings preserve document outline. <h1> is still <h1> semantically — the class affects only visual rendering.
For pages where <h1> should be display-hero, apply the class explicitly; don't reach for a smaller <h1> just to "make it look big". Semantics first.
Overline class adds text-transform: uppercase; consider whether the visible text reads naturally in upper case or if it should be Capitalized in source and uppercased only visually.

Do

Let <main> / <article> apply the defaults; only add .font-* classes when the role needs to differ.
Mark "lead" paragraphs with class="lead" for body-lead rendering.

Don't

Don't apply typography classes to <h1> just to change its size. If the visual role is "display-hero", the semantic intent is also display-hero — use the class. If the visual role is "heading-title", no class needed.
Don't combine multiple .font-* classes on one element — they override each other unpredictably.