4.3 Typography

The brand runs on six typefaces: four that carry the daily work (body, headline, brand display, and code) and two accent faces held back for graphic display and script moments. Each one has a job; together they cover everything from a 12px tooltip to a 72px hero headline.

This page is the brand-side view, what each typeface is for, how it feels, and what to reach for in which situation. For the developer-facing token reference (sizes, weights, line heights), see Typography.

Zalando Sans: interface and body

A variable sans-serif with a weight range of 300–900 and width range of 75%–125%. Clean, modern, and highly legible at all sizes. It does not call attention to itself, which is exactly why it works for body copy and UI: the eye reads through it, not at it.

Use Zalando Sans for body text, navigation, buttons, form fields, captions, and anything else that needs to be read quickly without friction.

Loaded from: self-hosted variable font in assets/fonts/zalando-sans/.
Licence: proprietary, self-host for By Default properties only.
Weights in use: 300–900 (variable).

ES Face: headlines and editorial

A distinctive display face with a broad weight range, Light through Bold, with matching italics. It carries weight without feeling stuffy, the right register for editorial headlines, big statements, and the kind of brand moments where the type itself should be doing some of the lifting.

Use ES Face for headings (h1–h6), pull quotes, hero statements, and anywhere a headline needs to feel like a headline rather than just larger body text.

Loaded from: self-hosted in assets/fonts/es-face/.
Licence: commercial, self-host for By Default properties only.
Weights in use: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700). With italics for every weight except SemiBold.

Bugrino: brand display

A distinctive sans-serif used for brand moments, eyebrows, buttons, and badges. Available in Regular, Medium, and Bold weights with Bold Italic.

Loaded from: self-hosted in assets/fonts/bugrino/.
Licence: commercial, self-host for By Default properties only.
Weights in use: 400, 500, 700, 700 italic.

IBM Plex Mono: code and labels

IBM's open monospace from the Plex superfamily. Rounded, even, and unmistakably technical. Use it for code blocks, inline code, keyboard shortcuts, file paths, and any small label that needs to read as "machine output" rather than running prose.

Loaded from: self-hosted in assets/fonts/ibm-plex-mono/.
Licence: SIL Open Font Licence 1.1.
Weights in use: 400, 500, 600.

Kaneda Gothic: display accent

A geometric display sans for the loudest, most graphic moments, oversized display text and accent headings where the type reads almost as a shape. It's applied through the .accent-display utility, which sets the face and uppercases the text. Reach for it sparingly, where ES Face would feel too editorial and the moment calls for pure impact.

Loaded from: Adobe Typekit, use.typekit.net/wgr3lwl.css.
Licence: Adobe Fonts subscription, served via Typekit CDN.
Weights in use: as provided by the Typekit kit.

Caput: script accent

A single-weight script face for rare, expressive flourishes, a signature-style accent, never a workhorse. It's applied through the .accent-script utility. Use it once, deliberately, where a moment wants a human, handwritten note; two scripts on a page is one too many.

Loaded from: self-hosted in assets/fonts/caput/.
Licence: commercial, self-host for By Default properties only.
Weights in use: 400 (single weight).

When to reach for which

Pairing rules

Do

• Use ES Face for the headline and Zalando Sans for everything underneath. That's the default rhythm.
• Lean on weight, not colour, to create hierarchy inside Zalando Sans body copy.
• Use Bugrino for brand moments, eyebrows, display text, buttons, where the type needs personality.
• Reserve Kaneda Gothic and Caput for accents, one graphic display moment or one script flourish, never as the running headline face.
• Use Plex Mono for anything that should feel literally "as written", file names, terminal output, raw values.

Don't

• Don't set body copy in ES Face. It's a display face; at small sizes the texture gets noisy.
• Don't run two display voices against each other. ES Face leads; Kaneda Gothic and Caput punctuate.
• Don't use Plex Mono for decorative text. It carries a strong "code" connotation; it shouldn't be doing aesthetic duty.
• Don't use Bugrino for body copy or long reads, it's a brand accent, not a workhorse.

See also

• Typography: full token reference (sizes, weights, line heights, letter spacing)
• Tokens: every CSS variable with raw values