Typography tokens provide a consistent, modular system for all text across the products. They are designed for clarity, readability, and hierarchy, while remaining flexible across devices.

The system uses four font families — a primary sans-serif for body and UI, a secondary display font for headings, a tertiary brand font for display and buttons, and a monospace for code. Fonts are self-hosted (Zalando Sans, Bugrino, IBM Plex Mono) or loaded via Adobe Typekit (trust-3a). For the full list of typography token values, see the Tokens page.

Font Sizes

The full type scale used across the system. Reference these tokens when setting font sizes on any element.

The scale uses a progressive step approach: +2px in the body range, +4px in the heading range, and +8px in the display range. This gives more granularity where it matters most.

Headings

All headings use var(--font-secondary) (trust-3a). Every level (h1–h6) uses fluid clamp() sizing that scales smoothly with viewport width — no breakpoints needed. Element defaults follow a traditional editorial scale (Major Third / ~1.25× progression).

Display contexts (hero pages, feature CTAs) use the separate --headline-size and --title-size role tokens applied via classes like .page-headline, .article-headline, and .cta-headline. Element defaults stay smaller; classes opt into display sizing.

<h1>Build systems that scale with your ambition</h1>
<h2>Every detail contributes to the whole</h2>
<h3>Structure creates clarity in complexity</h3>

Each heading uses clamp(min, fluid, max) with primitive --font-* tokens at the floor and ceiling — no new tokens, no media queries. Display variants use --headline-size (28px → 64px) and --title-size (24px → 48px) on classes like .page-headline and .cta-headline, kept distinct from element defaults so plain <h1> and <h2> in body copy read at editorial size.

Body Text

The default paragraph style used for all running content. The var(--body-size) token controls the base size globally — changing it updates paragraphs, inputs, code, tables, and buttons at once. Size modifier classes let you step up or down from the default.

Fluid sizing. Four of the five .text-size-* utilities are fluid — they grow with viewport width via clamp(rem + vw, ...). .text-size-xs stays fixed at 14px (the accessibility floor). .text-size-m resolves to var(--body-size) itself, so it's the cleanest way to reset a paragraph to body sizing inside a container that overrides font-size.

Reusable tokens. Each utility consumes a matching --text-size-* token (--text-size-xl, --text-size-l, --text-size-m, --text-size-s, --text-size-xs). Use the token directly on any custom selector when you want the utility's fluid sizing without applying the class.

<p class="text-size-xl">Lead paragraph text.</p>
<p class="text-size-l">Introductory text.</p>
<p>Default body text (no class needed).</p>
<p class="text-size-s">Smaller supporting text.</p>
<p class="text-size-xs">Captions and metadata.</p>

Step rhythm at 1440px (typical desktop): xs 14 → s 15 → m 17.4 → l 21.8 → xl 28. Jumps stay in the 25–30% range (comfortable for prose hierarchy; research consensus avoids jumps above 50%).

Eyebrow

A small, uppercase label used to provide context above headings, within sections, or inline with other content. The .eyebrow class works on any element — <p>, <span>, <h2>, or anything else.

<!-- On a paragraph -->
<p class="eyebrow">Case Study</p>
<h2>Building a design system from the ground up</h2>

<!-- On a span (inline) -->
<span class="eyebrow">Latest Update</span>

<!-- On a heading (semantic heading, eyebrow style) -->
<h2 class="eyebrow">Section Label</h2>

Blockquote

Used for pullquotes and highlighted passages. Renders in the secondary serif font with a left border accent.

<blockquote>
  <p>Good typography is invisible. Bad typography is everywhere.</p>
</blockquote>

Links

Links use text-color underlines with a hover transition. The default state shows var(--text-plain) text with a var(--text-link) coloured underline. On hover, the text colour shifts to var(--text-link) and the underline moves down slightly. External links (target="_blank") automatically show a share icon via ::after that inherits the link colour.

<!-- Inline link -->
<p>Read the full <a href="/brand">brand guidelines</a> before starting.</p>

<!-- External link (icon added automatically) -->
<p>Typography is powered by <a href="https://fonts.adobe.com/typekit" target="_blank" rel="noopener noreferrer">Adobe Typekit</a> and self-hosted variable fonts.</p>

Font Families

The system uses four font stacks, each with a distinct role.

body { font-family: var(--font-primary); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); }
code, pre, kbd { font-family: var(--font-quaternary); }

Font Weight

Available weight values from light to black. All headings default to regular weight.

font-weight: var(--font-weight-bold);

Font Width

The width of letters along the variable font's wdth axis (applied via CSS font-stretch). Zalando Sans supports 75% to 125%, exposed here as a five-step scale from condensed to expanded. Use narrower widths for compact UI chrome; wider widths for display moments that should feel broader on the page.

<h2 data-font-width="expanded">Expanded headline</h2>

Line Height

Vertical rhythm values from tight display text to loose body copy. Headings use tighter values; body text uses looser values for readability.

line-height: var(--line-height-l);

Line Length

Horizontal rhythm — the measure of a line of text. Bringhurst's Elements of Typographic Style gives a satisfactory range of 45 to 75 characters per line for body text, with 66 characters widely regarded as ideal. Below 45 = display territory; above 75 = unsuitable for long-form reading.

Apply with data-line-length="<value>" on any text element. Values are named typographically — pick the role that fits the content, not a t-shirt size.

<p data-line-length="body">Standard body copy.</p>
<h1 data-line-length="headline">Display title.</h1>

Letter Spacing

Tracking values used for labels, eyebrows, and display text. Values are em-based so they scale proportionally with font size.

letter-spacing: var(--letter-spacing-xl);

Type Roles

Four semantic roles compose the primitive tokens into building blocks. Each role defines four dimensions: size, weight, leading (line-height), and tracking (letter-spacing).

/* Use role tokens directly */
.custom-headline {
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
}

Headline and title sizes use clamp() for fluid scaling — they grow with the viewport between a minimum and maximum, with no breakpoints needed.