system
400.wtf

400.wtf / system / docs · docs/ADR/0014-typefaces.md

ADR-0014 — Typefaces: Bricolage Grotesque, IBM Plex Sans, IBM Plex Mono

Status: Accepted (2026-10-10, DS-1)

Context

The brief asks for a contemporary grotesk for display and interface text and a restrained mono for metadata. Display type is uppercase, monumental and in Portuguese. The DS-1 spike (a temporary /system/type page) set five pairings on one specimen with four roles (display, text, signage, metadata):

Display / text / signage / metadataLatin weight
AInter / Inter / Inter / Plex Mono≈ 104 kB
BGeist / Geist / Geist / Geist Mono≈ 56 kB
CPlex Sans ×3 / Plex Mono≈ 96 kB
DBricolage / Inter / Plex Sans / Plex Mono≈ 276 kB
EBricolage / Plex Sans / Plex Sans / Plex Mono≈ 228 kB

Findings

  • Leading: at 0.86 (typical for English display) Portuguese caps collide in every family. Ç’s cedilla meets Ú/Í on the next line, and Ô/Ã meet the line above. 1.0 is the tightest safe value. Copy rule: avoid breaking so that Ç sits directly above Ú/Í.
  • Display character: Bricolage’s optical display cut gives headlines warmth and slight irregularity. That’s the “organic life” counterweight to concrete and grid. At 75% width it turns into a poster face and letters fuse; 87.5% is monumental and calm. Plex/Inter/Geist display reads correct but generic.
  • Optical size is load-bearing: the width-only Bricolage subset (80 kB, opsz pinned to the text cut) renders much wider and loses the display character, so the full 132 kB file is required.
  • Inter + Plex Sans (D) puts two neutral grotesques side by side that differ only in small details. It reads as a near-miss rather than a contrast, so E keeps one workhorse.

Decision

E.

  • Display: Bricolage Grotesque Variable, 800, width 87.5%, optical sizing auto, tracking −0.01em, leading 1.0 (display-xl/l/m).
  • Text, labels, signage: IBM Plex Sans Variable. The sign step condenses to 85% for wayfinding plates.
  • Metadata: IBM Plex Mono 400/500.
  • Preload Bricolage + Plex Sans (Latin). Plex Mono loads on demand. No italics.
  • Fonts are owned by @400/ds (css/fonts.css, fonts.ts preload list), not the site.

Consequences

  • About 228 kB of Latin font data, double C’s. The two preloads cover above-the-fold text; metadata may briefly render in fallback monospace.
  • Three families means the hierarchy must stay strict. Bricolage appears only in display steps, never in UI or body.
  • Changing a face: fonts and the type steps in packages/ds/src/tokens/scale.ts, css/fonts.css, fonts.ts.