Typography

_typography.css implements the typography system from _variables.css, providing .ui-prose formatting for HTML documents and .text-* / .font-* utility classes.

Font stacks

Zazz defines raw stacks and semantic aliases on :root:

--font-family-body: var(--font-body);
--font-family-heading: var(--font-heading);

Override the raw --font-heading stack to customize heading typography (--font-family-heading already points at it). Utility classes map per element: .font-sans → --font-body, .font-serif → --font-heading (a sans stack by default — repoint --font-heading at a serif to change that), .font-mono → --font-family-mono.

Fluid type scale

Type sizes use fluid clamp() calculations that scale between mobile and desktop viewport widths without breakpoint queries. Steps include --font-size-eyebrow, body sizes (xs to xl), heading sizes (h6 to h1), and --font-size-display.

Each step specifies matching --leading-* and --tracking-* tokens. Weights are semantic, not per-step: five tokens (--font-weight-body, -heading, -strong, -mono, -eyebrow) cover the system.

Typography utility classes

Heading steps (.text-h6 to .text-h1, .text-display) apply font family, size, line height, letter spacing, and the heading weight together. Body steps (.text-xs to .text-xl) set size, line height, and letter spacing, inheriting family and weight:

<span class="text-display">Launch headline</span>
<p class="text-sm text-muted-foreground">Caption copy</p>

.font-* sets weight directly (.font-thin through .font-black), plus semantic shortcuts (.font-body, .font-heading, .font-strong). See Text and font and Text color.

.ui-prose container

Wrap unclassed HTML (such as Markdown or CMS output) in .ui-prose to format headings, paragraphs, lists, blockquotes, and figures automatically:

<article class="ui-prose">
  <h1>Page title</h1>
  <p>Body copy with standard typographic rhythm and measures.</p>
</article>

Prose configuration tokens

Vertical block rhythm is controlled by --paragraph-spacing-* tokens.