Typography

Preview Available in release assets

Map semantic document typography to body, display, mono, measure, type-scale, and spacing roles without replacing HTML structure.

Typography primary example

<article class="thin-prose">
  <h1>Readable document typography</h1>
  <p>Body copy uses the body font role and measured prose. <a href="#quote">Links remain visually identifiable</a>.</p>
  <h2>Balanced headings</h2>
  <blockquote id="quote">Source order and semantic levels remain authored in HTML.</blockquote>
  <pre>
    <code>overflow: auto;</code>
  </pre>
</article>

Show code

<article class="thin-prose">
  <h1>Readable document typography</h1>
  <p>Body copy uses the body font role and measured prose. <a href="#quote">Links remain visually identifiable</a>.</p>
  <h2>Balanced headings</h2>
  <blockquote id="quote">Source order and semantic levels remain authored in HTML.</blockquote>
  <pre>
    <code>overflow: auto;</code>
  </pre>
</article>

Anatomy

Body font and line height
Display heading role
Mono code role
Balanced heading wrapping
Optional prose measure
Prose rhythm

Variants and sizes

Document defaults
Measured thin-prose
Inline code
Preformatted block
Block quotation

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long words
Localized headings
Overflowing code
Narrow measure
200% and 400% zoom
Right-to-left content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links, selection, scrolling preformatted blocks, and find-in-page remain native.

Accessibility

Typography never supplies document hierarchy: author real headings, paragraphs, lists, quotations, and code. Preserve user zoom, readable line length, sufficient contrast, and horizontal access to intentionally preformatted content.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Load /foundation.css and a complete theme. Use semantic elements; add class=thin-prose when a measured reading column and vertical rhythm are desired.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Semantic document content remains readable with browser typography.

Assets and dependencies

/foundation.css
/themes.css

Dependencies: None

Source: packages/ui/src/style/foundation.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Prose