Monospace roles

Every monospace face in the report, on both type scales, as it renders today and as the audit proposes. “Today” means before 64a2b36a (15 Oct 2026); the “Proposed” columns shipped in it, except the figures. Open it in the Mac app's webview or Safari and in Chrome. Today's columns differ by browser and by whether the Mac has Apple's SF Mono download; the proposed column differs only by browser (system SF Mono in WebKit, Menlo in Chrome). Reasoning and measurements: docs/design-monospace-roles.md.

Artefact — real tokens and real component CSSCommentary — not the product

1 · Which face draws the mono

Web · Inter scale (browser, HTML export, the Mac app with Typography ▸ Inter)weights 300–700 in each column's face · synthetic content

Today — the shipped token, on this Mac

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx

Today — a Mac without the SF Mono download

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx

Proposed — one stack for both scales

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx
Desktop · SF Pro scale (the Mac app default)weights 300–700 in each column's face · synthetic content

Today — the shipped token, on this Mac

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx

Today — a Mac without the SF Mono download

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx

Proposed — one stack for both scales

drawn in

300p03 [00:14:32] Login.tsx370p03 [00:14:32] Login.tsx400p03 [00:14:32] Login.tsx420p03 [00:14:32] Login.tsx490p03 [00:14:32] Login.tsx500p03 [00:14:32] Login.tsx520p03 [00:14:32] Login.tsx600p03 [00:14:32] Login.tsx700p03 [00:14:32] Login.tsx
Commentary

“SF Mono” by name exists only on Macs with Apple's developer font package (com.apple.pkg.SFMonoFonts, installed here). The system's own mono is the hidden .SF NS Mono, reachable from CSS only as ui-monospace, and only in WebKit. So the left column is the developer's view, and the middle column is what a researcher's Mac shows.

Ink relative to 400, measured 15 Oct 2026 from DOM screenshots at 2×, in a lang="en" page like the report (the language matters: without it WebKit's generic monospace is Courier, with it Menlo). WebKit means Playwright WebKit and a sandboxed WKWebView, which agree to the pixel; each figure holds within ±0.5 points from 9.6 to 15 px.

face (how it is reached)300370420490500520600700
SF Mono download, static — both engines, by name−21%−21%+15%+15%+15%+30%+30%+50%
system SF Mono — WebKit, via ui-monospace−20%−5%+4%+16%+18%+21%+35%+53%
Menlo — WebKit's generic monospace; Chromium by name00000Bold, +33 to +39% (varies with the string)
Courier — Chromium's generic monospace (its own font API says so)00000Bold, +37 to +38%
Consolas — Windows Edge 92 and 152 (nearest-weight matching)000000 (Bold from 550)Bold
Cascadia Mono — Windows 11 Edge 15200+16%+16%+16%+27%

Given the same face, WebKit and Chromium draw the same ink at every weight. They differ only in which face they find. At the named instances (400, 500, 600, 700), the download and the system font agree within 2–5% and have identical advances. The off-instance weights (370, 420, 490, 520) are where the developer's Mac and a researcher's Mac part company. 400–490 is the safe band: Regular in Menlo, Courier, Consolas and Cascadia Mono, and varying only in SF Mono. 560 is the cheapest emphasis that turns Bold everywhere: Menlo flips above 500, but Windows matches the nearest weight, so Consolas needs 550. Full ground truth: docs/design-monospace-roles.md §6.

2 · The roles

Web · Inter scaleleft column: weights, not product · synthetic content
role · sizeweight today → proposed
Today — as shipped, on this Mac
Today — a Mac without the download
Proposed
Timecode beside a quote · label400, unchangedRegular everywhere
[00:14:32] “I couldn’t find the basket total.”
[00:14:32] “I couldn’t find the basket total.”
[00:14:32] “I couldn’t find the basket total.”
Timecode in a metadata row · caption400, unchangedRegular everywhere
Session 4 · 42 min [00:14:32]
Session 4 · 42 min [00:14:32]
Session 4 · 42 min [00:14:32]
Tag sentiment chip · badge370 → 460 light · 400 darkSF Mono +9% in light · Regular on every other face
frustration delight
frustration delight
frustration delight
Tag codebook tag · badge420 (490 in dark) → 460 light · 400 darkSF Mono +9% in light · Regular on every other face
basket total findability
basket total findability
basket total findability
Code speaker code · badge400, unchangedRegular everywhere
p03Ana m1
p03Ana m1
p03Ana m1
Path names the screen · caption490 → 560SF Mono +24% · Cascadia SemiBold · Menlo, Consolas: Bold
checkout-flow/Basket summary.png
checkout-flow/Basket summary.png
checkout-flow/Basket summary.png
Path plain · caption400, unchangedRegular everywhere
interviews/session-04/screens/Basket summary.png
interviews/session-04/screens/Basket summary.png
interviews/session-04/screens/Basket summary.png
Keycap footer hints · 0.85em → micro400, unchangedRegular everywhere
jk⌘F
jk⌘F
jk⌘F
Figures heatmap, metrics · label490 mono → 490 bodybody face, tabular figures: the body ladder
0.421.07123.90.08140
0.421.07123.90.08140
0.421.07123.90.08140
Desktop · SF Pro scaleleft column: weights, not product · synthetic content
role · sizeweight today → proposed
Today — as shipped, on this Mac
Today — a Mac without the download
Proposed
Timecode beside a quote · label400, unchangedRegular everywhere
[00:14:32] “I couldn’t find the basket total.”
[00:14:32] “I couldn’t find the basket total.”
[00:14:32] “I couldn’t find the basket total.”
Timecode in a metadata row · caption400, unchangedRegular everywhere
Session 4 · 42 min [00:14:32]
Session 4 · 42 min [00:14:32]
Session 4 · 42 min [00:14:32]
Tag sentiment chip · badge370 → 460 light · 400 darkSF Mono +9% in light · Regular on every other face
frustration delight
frustration delight
frustration delight
Tag codebook tag · badge420 (490 in dark) → 460 light · 400 darkSF Mono +9% in light · Regular on every other face
basket total findability
basket total findability
basket total findability
Code speaker code · badge400, unchangedRegular everywhere
p03Ana m1
p03Ana m1
p03Ana m1
Path names the screen · caption490 → 560SF Mono +24% · Cascadia SemiBold · Menlo, Consolas: Bold
checkout-flow/Basket summary.png
checkout-flow/Basket summary.png
checkout-flow/Basket summary.png
Path plain · caption400, unchangedRegular everywhere
interviews/session-04/screens/Basket summary.png
interviews/session-04/screens/Basket summary.png
interviews/session-04/screens/Basket summary.png
Keycap footer hints · 0.85em → micro400, unchangedRegular everywhere
jk⌘F
jk⌘F
jk⌘F
Figures heatmap, metrics · label490 mono → 490 bodybody face, tabular figures: the body ladder
0.421.07123.90.08140
0.421.07123.90.08140
0.421.07123.90.08140
Commentary

Regular (400) is the resting weight of every monospace role. Monospace marks kind, not importance: the face says "this is a time, a code, a path", and colour, size and the chip carry everything else.

Tags are one weight: 460 in the light appearance, 400 in dark (decided 15 Oct 2026). Today sentiment chips are 370 and codebook tags 420 (490 in dark). 460 gives light tags a little more bite in SF Mono (+9%) and is Regular on every other face, so it never tips into Bold anywhere.

Emphasis is 560, revised from 520 after measuring Windows: 520 is Bold in Menlo but stays Regular in Consolas, which needs 550. At 560: SF Mono +24%, Cascadia Mono SemiBold, Menlo and Consolas Bold. Today it applies only to the Screens path that names the screen. Keycaps stay Regular.

Figures leave monospace for the body face with tabular figures, keeping 490, where the body ladder works.

Proposed stack: ui-monospace, Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace. WebKit draws the system SF Mono on every Mac, download or not; Chromium on a Mac draws Menlo (it has no ui-monospace) instead of today's Courier; Windows Consolas; Linux DejaVu Sans Mono. Menlo and Consolas carry only Regular and Bold.

3 · Tags at 400, in their colours

Tags in their colours, light and dark, in the three places they sitthe selects are a judging tool, not product · synthetic content

Light — proposed stack · weight

page

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

quote card

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

sidebar

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

Light — today, as shipped on this Mac (chips 370, codebook tags 420)

page

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

quote card

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

sidebar

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

Dark — proposed stack · weight

page

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

quote card

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

sidebar

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

Dark — today, as shipped on this Mac (chips 370, codebook tags 490)

page

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

quote card

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

sidebar

frustration confusion doubt surprise satisfaction delight confidence

findability basket total checkout price shock saved cards p03Ana

Commentary

The same weight can read heavier light-on-dark. Light strokes on a dark ground spread (irradiation), so dark-mode sentiment chips, light text on a dark tint, may look a touch bolder than their light-mode twins. Dark-mode codebook tags are the other case: white on a mid-tone saturated tint has much less contrast, which can make strokes look thinner. That is probably what the shipped 490 bump was compensating for. Each column starts at the proposed weight (light 460, dark 400); change it to judge by eye. In WebKit (the app, Safari) every step shows; in Chrome, Menlo shows only Regular (≤500) or Bold.

Contrast, computed live from the colours this page resolves (the proposed rows, page context). WCAG is symmetric; APCA Lc is not: it scores light-on-dark and dark-on-light differently, which is this effect in numbers. A negative Lc means light text on a dark ground; compare magnitudes.

taglight · WCAGlight · APCA Lcdark · WCAGdark · APCA Lc