Foundation · Readability
We chose calm and readable.
Most design systems optimize for dashboards — then leave long-form copy to guesswork. byronwade/ui bakes peer-reviewed web reading parameters into foundation so articles, docs, and UI chrome each get the lane they deserve. This page is the reasoning, not a literature review.
Readable web typography is not about mimicking paper, e-ink, or speed-reading hacks. Emissive screens reward capped measure, generous line height, neutral letter-spacing on paragraphs, and semantic token contrast. The research agrees on those constraints even when it disagrees on which font is fastest for you personally.
So we did not ship a “reading theme.” We shipped utilities — reading-ui and reading-prose — and wired them into the AI rule, marketing layouts, and this documentation. The accent stays on surfaces; the science stays on copy.
Why we took this road
Research → decision → utility.
- 01
Two lanes, not one typeface
Because · Bernard et al. found no objective speed difference between serif and sans on screens at 12pt — but Wallace et al. showed up to 35% speed variation between fonts per individual. Voice matters; a single global body font does not.
We chose · UI lane (`font-sans`, compact tracking) for chrome. Reading lanes (`reading-ui`, `reading-prose`) for copy meant to be read.
Bernard 2003 · Wallace TOCHI 2022 ↗ - 02
65 characters, not full bleed
Because · Dyson & Haselgrove measured best comprehension at ~55 CPL; typographic consensus sits at 50–75. WCAG caps at 80ch for accessibility.
We chose · `reading-measure`, `reading-ui`, and `reading-prose` all cap at 65ch — inside the sweet spot with headroom below the WCAG ceiling.
Dyson & Haselgrove 2001 · WCAG 1.4.8 ↗ - 03
1.6–1.7 line height, not browser default
Because · Browsers default to ~1.2. WCAG requires ≥1.5× within paragraphs; wider measure needs more vertical rhythm to track the next line.
We chose · Foundation body at 1.6. `reading-ui` at 1.6 (16px sans). `reading-prose` at 1.7 (18px serif).
WCAG 2.2 SC 1.4.8 ↗ - 04
18px serif for essays, 16px sans for docs
Because · 10pt anti-aliased Arial read slowest in Bernard’s display study; 12pt+ performed best. Long-form editorial voice benefits from serif warmth without claiming serif is faster.
We chose · `reading-prose` ships 1.125rem EB Garamond. `reading-ui` ships 1rem Geist Sans for neutral docs.
Bernard et al. 2003 ↗ - 05
Reset tracking on reading surfaces
Because · Foundation applies `-0.006em` on body for crisp UI density. Negative tracking on long measures increases fatigue.
We chose · `letter-spacing: 0` on both reading utilities — UI tightness stays in dashboards, not in paragraphs.
WCAG 1.4.8 spacing guidance ↗ - 06
Token contrast, not paper cosplay
Because · E-ink palettes (sepia, 16-gray ramps) look flat on emissive LCD/OLED. Readable web text needs semantic foreground on background at ≥4.5:1.
We chose · Warm paper neutrals via `--foreground` / `--background` tokens. No e-ink simulation utilities.
WCAG 2.2 SC 1.4.3 ↗ - 07
No readability hacks
Because · Bionic Reading showed no significant speed benefit in controlled studies (Acta Psychologica 2024; Readwise n≈2,000).
We chose · No bold-first-word patterns, no faux-ink filters — measure and rhythm only.
Bernard, Acta Psychologica 2024 ↗
Three lanes
Same words. Different job.
One paragraph rendered three ways — UI density, docs sans, essay serif. The lanes draw on the same type families, but only the reading lanes get measure caps and paragraph spacing. This is the system working as designed.
UI lane
font-sans · text-sm
Dashboards, forms, tables — compact, scannable
Calm software should still be readable software. When someone sits down to read — not scan a dashboard, but actually read — the measure, size, and rhythm matter more than the accent color. That is why we ship reading utilities in foundation instead of leaving every product to rediscover the same research.
Docs lane
reading-ui
65ch · 16px sans · 1.6 lh · 1.5em paragraph gap
Calm software should still be readable software. When someone sits down to read — not scan a dashboard, but actually read — the measure, size, and rhythm matter more than the accent color. That is why we ship reading utilities in foundation instead of leaving every product to rediscover the same research.
The UI lane stays tight for density. The reading lanes open up: sixty-five characters wide, generous line height, neutral tracking, token contrast. Same palette, different job.
Essay lane
reading-prose
65ch · 18px serif · 1.7 lh · 1.5em paragraph gap
Calm software should still be readable software. When someone sits down to read — not scan a dashboard, but actually read — the measure, size, and rhythm matter more than the accent color. That is why we ship reading utilities in foundation instead of leaving every product to rediscover the same research.
The UI lane stays tight for density. The reading lanes open up: sixty-five characters wide, generous line height, neutral tracking, token contrast. Same palette, different job.
Explore the bounds
Stress-test measure and rhythm.
Drag past 80ch to feel WCAG friction. Pull below 45ch to feel rhythm break. Defaults match foundation, and the same caps route correctly across application and marketing surfaces — you should rarely need to override.
Research sweet spot
Line height · 1.70
Font size · 18px
Typeface voice
Tune against the defaults
Calm software should still be readable software. When someone sits down to read — not scan a dashboard, but actually read — the measure, size, and rhythm matter more than the accent color. That is why we ship reading utilities in foundation instead of leaving every product to rediscover the same research.
The UI lane stays tight for density. The reading lanes open up: sixty-five characters wide, generous line height, neutral tracking, token contrast. Same palette, different job.
Foundation defaults: reading-ui · reading-prose @ 65ch
Shipped in foundation
Use the utilities. Don't re-roll.
reading-measure
65ch max-width only
reading-ui
Docs lane · sans · 16px · headings, lists, links
reading-prose
Essay lane · serif · 18px · full in-flow typography
reading-lead
Optional opener — slightly larger first paragraph
reading-muted
Secondary copy inside a lane — AA-friendly mix
reading-demo-break
Full-width band above demos — breaks reading measure
Primary sources
- The Readability Consortium — Adobe · Google · UCF
- Wallace et al., TOCHI 2022 — 35% personal font speed range
- Dyson & Haselgrove, 2001 — 55 CPL optimal
- Bernard et al., 2003 — Display type size baseline
- WCAG 2.2 SC 1.4.8 — 80ch · 1.5× lh · paragraph spacing