— Eye Pleaser · Typography Lab · Reading Science

Why Your Eyes Tire Before Your Mind Does

Most screens are built for engagement metrics, not human endurance. The result: millions of people blame their attention span for what is actually a design failure.

A warm reading lamp illuminating an open book on a wooden desk

01 · The Physics of Eye Fatigue

Your eye contains about 120 million rod cells and 6 million cone cells. Reading forces them to work in concert with extraordinary precision — and three design choices determine whether that work is sustainable or exhausting.

The three culprits

Halation — pure white #ffffff behind dark text creates a bloom where glyphs bleed into each other. Fix: off-white backgrounds like #F5F2EC eliminate it entirely.
Saccadic strain — lines longer than 80 characters force the eye to hunt for the next line start, burning energy on navigation. 680px max-width at 19px is the sweet spot.
Tight leading — line-height below 1.5× crowds descenders and ascenders visually. 1.65× line-height gives each line room to breathe.

02 · Reading Presets, Decoded

Each preset is a complete typographic system — not just a color swap.

Preset	Background	Best For
Anthropic Light	`#F5F2EC` warm cream	Long editorial, daytime
Anthropic Dark	`#141210` near-black	Night reading, low ambient light
Eye-Care Dark	`#1a1814` warm dark	Extended sessions
Medium	`#ffffff` pure white	Familiar editorial rhythm
Vite Docs	`#1b1b1f` cool dark	Technical documentation

03 · The Font Stack Decision

A professional typography and printing studio

Research consistently finds serif fonts outperform sans-serif for body text longer than 4 sentences — but only at sufficient size and line-height. Below 16px, this reverses entirely.

The Anthropic preset uses:

Body      →  Geist          geometric sans — clean, modern
Headings  →  Fraunces       optical serif  — warm, literary
Code      →  JetBrains Mono humanist mono  — legible at small sizes

"The best typeface is the one you forget you're reading."
— paraphrased from Beatrice Warde, 1932

04 · The Three Spacing Levers

Line Height    1.65×   →  Vertical breathing room, reduces saccadic error
Max Width      680px   →  Keeps lines ≤ 80 chars at 19px, no head-swivel
Letter Spacing 0.01em  →  ~8% faster character recognition

Tune these in the Customize tab. Your eyes calibrate within 30 seconds — trust the feedback.

05 · Colored Text in Markdown

This app supports inline HTML inside markdown. Wrap any text in a <span> with a style attribute:

<span style="color:var(--accent-color)">terra cotta accent</span>
<span style="opacity:0.5">muted label text</span>
<span style="font-family:monospace;text-transform:uppercase;font-size:0.8em">eyebrow label</span>

Combine with markdown bold, italics, and headers for full typographic control — the same design language as the Phase 3 Benchmark page.

Peaceful mountain lake surrounded by misty forest

Markdown Eye Pleaser · Built for endurance, not engagement