Typography

Airframe styles semantic HTML first (<h1>–<h6>, <p>, <small>). Use af-text-* roles only when the accessible heading level and the visual size should differ.

For the type scale, tokens, and deep customization, see the Typography guide and Tokens. For small utility tweaks (muted, mono, af-title), see Text style below.

Semantic type & text roles

Quick reference

Markup	When to use
<h1> … <h6>	Default: real document outline and visual hierarchy match.
<h2 class="af-text-h1"> … af-text-h6	Same outline, different visual level (e.g. page title look on a section heading).
<p class="af-text-h3">	Rare: paragraph or span that should look like a heading but must not be a heading in the outline.
.af-text-display, .af-text-fluid-h1	Marketing hero / large display (not a substitute for a real <h1> when one is needed).

Semantic headings

Use one real <h1> per page (or main landmark) when you are establishing the outline. Levels h2–h6 nest under it. Default Airframe styles apply automatically—no classes required.

Previews on this page start at <h2> so they don’t add a second page-level <h1> next to the docs title. Use <h1> on your site the same way as in the snippet.

Heading levels h1–h6

Monthly summary

Revenue

North America

Enterprise accounts

Last updated

Preview starts at h2; add h1 for your main title (see code tab).

<h1>
  Reports dashboard
</h1>
<h2>
  Monthly summary
</h2>
<h3>
  Revenue
</h3>
<h4>
  North America
</h4>
<h5>
  Enterprise accounts
</h5>
<h6>
  Last updated
</h6>

Text roles (semantics vs visuals)

Prefer fixing the heading level in the markup whenever you can. Use af-text-h1 … af-text-h6 when the correct accessible level is already chosen but the visual step should be different.

Visual override with af-text-*

Looks like H1, outline says H2

Compact section title

<h2 class="af-text-h1">
  Looks like H1, outline says H2
</h2>
<h3 class="af-text-h4">
  Compact section title
</h3>

Optional paragraph-sized roles for copy that should not be headings in the tree:

Body, caption, lead, overline

Regular body text.

Explicit body role (same as an unclassed paragraph).

Lead — larger intro, muted color.

Caption / fine print.

Overline label

<p>
  Regular body text.
</p>
<p class="af-text-body">
  Explicit body role (same default as plain p).
</p>
<p class="af-lead">
  Lead — larger intro, muted color.
</p>
<p class="af-text-caption">
  Caption / fine print.
</p>
<span class="af-text-overline">
  Overline label
</span>

Display and marketing type

For heroes, stats, and section labels—still pair with a proper heading where SEO and assistive tech need a real outline.

Display, fluid headings, eyebrow, stat

Product

Ship faster with less CSS

Responsive hero (fluid)

12.4k

<p class="af-eyebrow">
  Product
</p>
<div class="af-text-display">
  Ship faster with less CSS
</div>
<h1 class="af-text-fluid-h1">
  Responsive hero (fluid)
</h1>
<p class="af-stat-display">
  12.4k
</p>

On primary surfaces, use af-is-on-primary with af-eyebrow so contrast stays readable.

Heading groups

Use <hgroup> to group a heading with a subtitle or tagline (hero, card header, page title).

hgroup + lead

Invoices

Review and send billing in one place.

<hgroup>
  <h1>
    Invoices
  </h1>
  <p class="af-lead">
    Review and send billing in one place.
  </p>
</hgroup>

<hgroup> only affects layout. It does not fix a wrong outline: keep h1 → h2 → h3 order meaningful for keyboard and screen reader users.

Readable line length

Wrap long-form copy in af-prose or af-measure (65ch). Narrow: af-measure-narrow (45ch). Wide: af-measure-wide (80ch).

<article class="af-prose">
  <h2>
    Chapter title
  </h2>
  <p>
    Paragraphs stay within a comfortable measure.
  </p>
</article>

Blockquote

<blockquote>
  <p>
    Quoted statement with default blockquote styling.
  </p>
</blockquote>

Inline code

<p>
  Use
  <code>
    const x = 1
  </code>
  inside sentences.
</p>

Utility class groups

Sizing, alignment, wrapping, and numeric helpers live in dedicated pages:

• Text style — af-text-muted, af-text-sm / md / lg, af-title, af-text-strong, …
• Text wrapping & clamp — af-text-nowrap, af-text-break, af-clamp*
• Text alignment — af-text-center, af-text-start, af-text-end
• Numeric — af-numeric

Related

• Typography guide — philosophy, tokens, PostCSS typography output
• Tokens — --af-type-* and font variables