Typography

§01 · Two families, both single-purpose. Load them in this exact order.

Display & body — human voiceAa Bb Cc


Family	New York (Apple system serif, via `ui-serif`). Fallback: Newsreader (Google Fonts, opsz 6–72, wght 400/500, italic 400), then Georgia
Stack	`ui-serif, 'New York', 'Newsreader', Georgia, serif`
Weights	400 regular only. Use italics for emphasis words in headlines
Tracking	Headlines −0.01em (−0.02em at 64px+). Body 0
Wrap	`text-wrap: pretty` everywhere

Labels, UI, data — machine voice01:30


Family	Departure Mono by Helena Zhang — departuremono.com
Load	`@font-face`. Coipe self-hosts `DepartureMono-Regular.woff2` (the source loads it from jsDelivr) so student browsers make no third-party requests
Weights	One weight (400). Never fake bold or italic
Case	UPPERCASE for labels and kickers, tracking +0.04 to +0.08em. Sentence case is allowed for tiny inline code
Pixel grid	Drawn on an 11px grid. Display sizes are sharpest at multiples of 11: 11, 22, 33, 44, 55, 66

Type scale by register

Every sample below is rendered at its specified size.

A · Blueprint

A · Hero

Precision drawn by hand.

Serif 64–72 / lh 1.0 / −0.02em · Text #0E1A3A

A · Page title

Fonts and vectors

Serif 40–48 / lh 1.05–1.1 / −0.01em

A · Lead / body

A technical reference manual with a romantic voice, set in the human serif.

Serif 17–20 / lh 1.55 · #2A3554

A · Kicker / FIG label

CH.07 — Fonts and vectors · FIG 7.1

Mono 11 / +0.06–0.08em / UPPER · Ink #1F3FD6

A · Caption

Side elevation: tonal fills, callouts, dimensions

Mono 10–11 · Muted #6B7896, next to an ink FIG number

B · Collage

B · Game title

Sky Hopper

Serif 36 / lh 1.1 at (60, 44) on a 1200×760 stage, with a mono 13 +0.08em ink kicker above

B · Buttons & tags

Check · Snip A

Mono 14–16 UPPER

B · Clue / message

Hmm, not there. Try another car!

Serif 18–26 / lh 1.25–1.4

B · Overlay headline

Pop! Just confetti.

Serif 40–44

B · Clock / LCD

01:30

Mono 64–66 on a Prussian #0B2380 panel, Butter #FFE896 digits, #FF8A73 when ≤10s

C · Graphite

C · Page title

Field notes

Serif 52 / lh 1.05 · Graphite #3A3F4B

C · Step number + title

Watch the clock

Mono 28 ink + Serif 24 graphite, baseline-aligned, gap 10

C · Step body

One idea per step, in the imperative.

Serif 17 / lh 1.45

C · Tip head / body

Tip · Snip the blue wire

Mono 13 ink UPPER / Serif 16 / lh 1.4

Loading

@font-face{font-family:'Departure Mono';src:url('https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@main/public/assets/DepartureMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap">
--font-serif: ui-serif,'New York','Newsreader',Georgia,serif;
--font-mono:  'Departure Mono',ui-monospace,monospace;

In Coipe code, both fonts are self-hosted: @coipe/design-tokens/fonts.css serves Departure Mono, and each Next.js app loads Newsreader with next/font and exposes it as --font-newsreader, which --font-serif picks up.