Typography Systems & Mobile Touch Ergonomics
Mathematical tracking formulas, Bringhurst line length limits, OKLCH dark mode halation mitigation, and defensive viewport layout engines.
1. Typographic Scales & Optical Tracking
As font size scales upward, glyph spacing naturally looks loose. Rasmus Andersson's exponential decay formula for Inter and Geist balances character lockup:
| Hierarchy Level | Font Size | Line Height (Leading) | Letter Spacing (Tracking) | Optimal Measure (Line Length) |
|---|---|---|---|---|
| Display / H1 | 36px – 64px (2.25rem+) | 1.05 – 1.15 (leading-tight) | -0.035em to -0.045em | 20 – 40ch |
| Section Title (H2) | 24px – 32px (1.5rem) | 1.20 – 1.30 (leading-snug) | -0.020em to -0.025em | 30 – 50ch |
| Body Copy | 15px – 16px (1.0rem) | 1.55 – 1.65 (leading-relaxed) | 0.000em (normal) | 60 – 75ch (max-w-prose) |
| Data Table / Metrics | 12px – 13px (0.81rem) | 1.30 – 1.40 (leading-normal) | +0.010em (tracking-wide) | 15 – 30ch (tabular-nums) |
The Bringhurst 65ch Measure Rule
When body copy exceeds 80–85 characters per line, the eye loses its place tracking back to the next line. Always constrain reading columns using max-w-prose or max-width: 65ch.
2. Dark Mode Palettes & Astigmatism Halation
#000000 Pitch Black Canvas
Pairing pure #000000 with pure #FFFFFF causes pupil dilation and severe astigmatism halation (text bloom/ghosting) for 40%+ of users. It also eliminates spatial elevation layering.
Zinc / Slate Dark Mode
Canvas #09090b (Zinc 950) + Card #121215 / #18181b + Text #f4f4f5 (Zinc 100). Yields crisp 15.5:1 contrast with zero glare.
3. Mobile Touch Ergonomics & Defensive Layout Rules
1. Bulletproof Responsive Grid
Nesting min(100%, 300px) inside minmax() prevents horizontal overflow on narrow devices:
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));2. Defensive Flex Children (min-w-0)
Flex items default to min-width: auto, refusing to shrink below long text or URLs. Always declare:
.flex-child { min-width: 0; overflow-wrap: anywhere; }3. iOS Safari 16px Input Rule
Inputs with font-size < 16px trigger intrusive auto-zooms on iOS. Ensure mobile form inputs declare:
input, textarea, select { font-size: 16px; }4. Minimum 48x48px Touch Targets
Expand the interactive hit area of compact icons without altering visual proportions:
.icon-btn::before { content: ''; position: absolute; min-width: 48px; min-height: 48px; }