02-sops

typography guide

·sop
designtypographyreference

Typography Guide

A working reference for choosing and pairing typefaces in Ray Data Co properties — newsletter, landing pages, decks, vault notes. Built from Matthew Butterick’s Practical Typography, Ellen Lupton’s Thinking with Type, the Vox-ATypI classification tradition, and the open-source font ecosystem we actually have access to.

This is a teaching document, not a brand standard. It exists so we can describe a design choice with precision instead of “I like that one.”

1. Why typography matters

Typography is the single largest surface area of any reading-heavy product. Before a reader has parsed a sentence, the typeface has already told them: this is serious / playful, modern / heritage, technical / human, premium / commodity. Butterick is blunt — typography is the visual component of the written word, and good typography is what reinforces the meaning of the text rather than fighting it.

For us specifically, three things matter:

  1. Legibility at length. The Sanity Check newsletter and any longform on the site assume the reader will sit with us for 5+ minutes. Bad body type fails silently — readers don’t quit and tell us, they just don’t come back.
  2. Voice. Type carries voice the way clothing carries persona. A geometric sans says “we’re a tech company”; a transitional serif says “we have things to say”; a slab says “we’re confident enough to be opinionated.” Our positioning (practitioner voice, technical authority, opinionated essays) maps to a specific corner of the type space.
  3. Accessibility. WCAG contrast ratios, minimum body sizes (16px+), comfortable measure (45–75 characters per line), and not breaking rendering on slow connections. Accessibility is the floor, not the ceiling.

A quick orientation: most of the choices below are between categories of typefaces, not specific files. Once you know the category, the specific pick is mostly about availability, licensing, and personal taste.

2. Type classification — the 6 categories that matter for our work

The full Vox-ATypI classification has 11 categories plus subdivisions. For practical web work, six are load-bearing.

2a. Humanist sans

Definition: Sans-serif typefaces that derive their proportions from old-style serifs (Renaissance handwriting). Variable stroke width, open apertures, slightly calligraphic letterforms. The “warmest” sans category.

Feel: Approachable, human, slightly editorial. Reads well at long lengths because the letterforms have enough internal variation to keep the eye engaged. A humanist sans for body text is the safe, smart default for a content-heavy site.

Curated picks:

Canonical use cases: Body text on long-form sites, app UI, technical documentation. See mood board: Anthropic, shadcn/ui, Notion.

2b. Geometric sans

Definition: Sans-serifs constructed from pure geometric shapes — circles for o/c/e, straight lines for stems. Bauhaus heritage (Futura, Avenir). Typically uniform stroke width.

Feel: Modern, deliberate, slightly cold. Reads as designed-not-grown. Great for headlines, brand marks, and short statements. Tires the eye at long body lengths because the letterforms are too uniform to give the eye footholds.

Curated picks:

Canonical use cases: Headlines, marketing pages, brand systems. See mood board: Vercel, Mona Sans showcase.

2c. Neo-grotesque sans

Definition: The mid-century Swiss tradition. Helvetica is the archetype. Tighter apertures than humanist, more uniform than geometric, “neutral” by design intent. Spiritual heart of Swiss style.

Feel: Authoritative, neutral, corporate-clean. The closest thing typography has to a “no-style style.” Stripe’s site is the canonical modern example.

Curated picks:

Canonical use cases: Corporate sites, fintech, anywhere “trust” needs to be the dominant signal. See mood board: Stripe, OpenAI, Linear.

2d. Transitional / Old-style serif

Definition: The serif categories Lupton calls “humanist” (old-style — Garamond, Caslon) and “transitional” (Baskerville, Times). Moderate stroke contrast, bracketed serifs, designed for sustained reading.

Feel: Authoritative, considered, literary. The default choice for editorial publications because it’s been optimized for reading on physical pages for ~400 years. Carries voice — it implies the writer has things to say.

Curated picks:

Canonical use cases: Longform essays, newsletter body, anywhere the reader will commit to reading 800+ words. See mood board: NYT, The Atlantic, Substack.

2e. Slab / display serif

Definition: Serif typefaces with thick, blocky, often unbracketed serifs. “Display” is a usage category — type designed to be set large (headlines, posters), not for body text.

Feel: Confident, opinionated, often retro or industrial. A slab in a headline says “we have a point of view.” Used at body length, slabs fatigue the reader fast.

Curated picks:

Canonical use cases: Headlines, pull quotes, drop caps. See mood board: Bloomberg, Klim.

2f. Monospace

Definition: Every glyph occupies the same horizontal space. Designed for code, technical metadata, anywhere alignment matters more than reading flow.

Feel: Technical, honest, “showing the work.” A mono in body text reads as either developer-coded or zine-handmade. Used surgically — code blocks, file paths, tabular data — it signals technical authority.

Curated picks:

Canonical use cases: Code blocks, terminal output, tabular figures, file paths, occasionally as a brand-distinguishing accent face. See mood board: Vercel, Read.cv, ia.net.

3. Pairing heuristics

The first principle is contrast — paired typefaces should be obviously different in classification, weight, or scale, not subtly different. Two humanist sans next to each other looks like a mistake. A serif and a sans look intentional.

The working formula for most product/content sites is:

One serif + one sans + one mono. The serif handles longform body or display headlines (pick one role for it). The sans handles UI and short-form reading. The mono handles code and technical metadata.

You can often drop down to two faces (sans + mono, or serif + mono) without losing range. Three is a comfortable maximum. Four faces almost always means the system isn’t disciplined.

When to break the formula:

Worked examples (real sites, observable choices)

  1. Stripe — Sohne (neo-grotesque sans) for everything, with Sohne Mono for code. Single foundry, two faces. Reads as expensive restraint.
  2. Linear — Inter Display (humanist/neo-grotesque hybrid) for everything, mono for code. One family, two optical sizes.
  3. Vercel — Geist Sans + Geist Mono. Brand-as-typography. The font IS the identity.
  4. Anthropic — A custom serif (Tiempos-adjacent) for headlines, Styrene-style sans for body, mono for code. Three faces, all with personality.
  5. The Atlantic — Custom transitional serif for body, sans for UI chrome and metadata. Editorial-classic pairing.
  6. NYT — Cheltenham (display serif) + Imperial (text serif) + Franklin Gothic (sans). Three serifs and a sans — the formula intentionally broken because they’re a 170-year-old newspaper with the heritage to do that.
  7. shadcn/ui — Geist + Geist Mono (or system stack). Minimal by design.
  8. GitHub — Mona Sans (geometric) for marketing, system font stack for product, custom mono for code. Marketing/product split is common at scale.
  9. Notion — Inter for product UI, custom display serif for marketing headlines. Workhorse + dress-up.
  10. iA Writer marketing site — Nitti Grotesk + iA Writer Quattro (mono used as body text). Mono-as-body is iA’s identity move; it works because they’re a writing app — the mono signals “we take typography seriously enough to do something weird.”

4. When to use what — operational table

SurfaceCategories that workWhyAvoid
Marketing headlines (h1-h2)Geometric sans, slab/display serif, neo-grotesque (heavy weights)Need to carry weight at large sizes; geometric / display are designed for itBody-text serifs at display size — they’re optimized for small
Editorial headlines (essays, newsletter)Transitional serif, slab serifCarry voice; signal “longform”Geometric sans — reads as marketing, not writing
Body prose (longform reading)Transitional / old-style serif (preferred), humanist sansOptimized for sustained reading; letterform variation reduces fatigueGeometric sans, slabs, mono. Body text in mono is a stylistic choice with a real legibility cost.
UI text (buttons, nav, forms)Humanist sans, neo-grotesque sansDesigned for short bursts of reading at small sizesSerifs (look dated in UI), mono (looks like code, not interface)
Code blocksMonospace, alwaysAlignment matters; conventionAnything else — readers expect mono
Captions / metadata / labelsHumanist sans (smaller, lighter weight), monoVisual recession from main contentDisplay faces — they fight the main hierarchy
Tabular numbers (financials, dashboards)Sans with tabular figures enabled (Inter, Source Sans, IBM Plex)Aligned digits prevent jitterProportional figures — they shift columns
Drop capsDisplay serif, slab serifDesigned to be set hugeSans-serif drop caps look amateur

5. Web vs print considerations

Line-height (leading). Web body text wants 1.5–1.6× the font size. Print can go tighter (1.2–1.3×). Headlines want tighter still (1.05–1.2×). Default browser line-height (~1.2) is too tight for body text on every modern site.

Measure (line length). Butterick’s rule: 45–75 characters per line for body text, 60–66 ideal. CSS max-width: 65ch is the easy way to enforce this. Wider lines fatigue the eye; the reader loses their place returning to the next line. Most blog templates default to 80+ characters and are worse for it.

Pixel sizing vs rem. Use rem for all type sizing so users can override base font size for accessibility. Set html { font-size: 100%; } (= 16px default) and size everything in rem. Body text should be 1rem (16px) minimum — Butterick argues for 18–22px on most modern displays.

Font-loading strategies (FOIT / FOUT). “Flash of invisible text” (FOIT) — page renders blank until web font loads. “Flash of unstyled text” (FOUT) — page renders in fallback, then swaps. Always prefer FOUT. Use font-display: swap in @font-face declarations. Better: preload the critical font in the <head>. Best: use size-adjust and matching fallback metrics so the swap is invisible.

Variable fonts. A single file containing the full weight / width / optical-size axis as continuous variables. Massive bandwidth savings vs loading 5 separate weight files, and lets you do things like animate weight on hover. Inter, Source Serif 4, Mona Sans, IBM Plex Sans (Variable), Geist — all variable. Default to variable when available.

Optical sizing. Some variable fonts include an “optical size” axis — the font auto-adjusts proportions for display vs body use. Source Serif 4 is the open-source poster child. Use it.

System font stack as a fallback (or default). system-ui, -apple-system, "Segoe UI", Roboto, ... renders instantly with zero bandwidth. shadcn/ui ships system-stack by default. For internal tools and dev-facing surfaces, system stack is often the right answer.

6. Licensing notes

Distinguish four license tiers — the third is the trap.

1. Open-source (free for commercial use, redistributable).

2. Adobe Fonts (subscription).

3. Free for personal use / paid for commercial use (the trap).

4. Foundry à la carte purchase.

Operational rule for RDCO: default to OFL/Google Fonts for everything. Reserve à-la-carte foundry purchases for the brand identity face if and when we decide one is worth the cost. Avoid Adobe Fonts as a production dependency.

7. Specific RDCO recommendations

Given our positioning — practitioner voice, technical authority, reading-heavy publication, Cloudflare Pages stack — here are three candidate font kits, ranked by my preference.

Kit A — “Quiet authority” (recommended default)

Why: Source Serif 4 carries editorial weight without being precious — the right voice for “practitioner who has things to say.” Inter is the modern UI standard with no learning curve for the reader. Plex Mono adds personality; JetBrains Mono is more neutral if we want the code blocks to recede. All OFL, all self-hostable on Cloudflare. Total page weight under 200KB with variable fonts and subset glyph ranges.

Kit B — “Single family discipline”

Why: Plex was designed as a coherent system across all three. One foundry, one design language, three faces that explicitly belong together. Reads as deliberate. Weakness: Plex has a lot of personality, which can fight the content if the writing is dense.

Kit C — “Modern technical”

Why: Open source, variable, designed for screens, paired natively. The most “contemporary tech company” of the three. Weakness: it’s now associated specifically with Vercel — using it makes us look like a Vercel-adjacent product. Also has no serif, so we’d need to add one for longform or commit to all-sans.

Decision criteria: if the newsletter and site are the primary surfaces (long-form reading), Kit A wins on body legibility. If we want a single coherent system across decks / docs / web, Kit B wins on consistency. If we want to lean modern-technical and skip serif entirely, Kit C is honest about that.

See also