Typography

The brand runs on four type families. 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).

trust-3a — headlines and editorial

A display typeface loaded via Adobe Typekit. 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 trust-3a 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: Adobe Typekit — use.typekit.net/wgr3lwl.css.
Licence: Adobe Fonts subscription — served via Typekit CDN.
Weights in use: as provided by the Typekit kit.

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.

When to reach for which

Pairing rules

Do

• Use trust-3a 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.
• 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 trust-3a. It's a display font — at small sizes the texture gets noisy.
• Don't pair trust-3a with another serif or display font. It's the only display face in the system.
• 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