About
Font size should scale with distance. 24" viewing: 16-18px body. Phone (12" viewing): 14-16px. Billboard (50ft): 18 inches. Audience matters: seniors need 25-50% larger. Long-form reading benefits from 18-20px. UI/buttons: 14-16px sufficient.
Formula
Frequently asked questions
What is the minimum readable font size for body text on the web?
16px is the practical minimum for body text on screens, and it is the default size browsers use. Going below 16px forces most readers to squint or zoom, especially on mobile, and hurts comprehension. For comfortable long-form reading, 18 to 20px is widely considered ideal. UI labels and secondary text can drop to 14px, but core reading content should stay at 16px or above.
How does viewing distance affect the right font size?
Font size should scale with how far the reader sits from the screen. At a typical 24-inch desktop distance, 16 to 18px body text works. A phone held about 12 inches away can use 14 to 16px because it is closer. A TV viewed from 8 feet needs much larger text, and signage scales further: a billboard read from 50 feet needs letters around 18 inches tall. The rule of thumb is roughly one inch of letter height per 10 feet of distance.
What font size do older readers need?
Readers over about 60 typically benefit from text 25 to 50 percent larger than the baseline, because near vision and contrast sensitivity decline with age. If your audience skews older, bump 16px body text to 18 to 20px and ensure strong contrast. Accessibility guidelines also recommend letting users resize text up to 200 percent without breaking the layout.
Why is 16px the browser default?
Every major browser sets the default font size to 16px (1rem) because decades of testing found it readable for most people at typical screen distances. Building your typography in rem units relative to that 16px base means your text respects the user's own browser settings, which is important for accessibility. Hard-coding tiny pixel sizes overrides that and can lock out users who need larger text.
Does font size alone determine readability?
No. Line height (around 1.5 for body text), line length (about 50 to 75 characters), contrast between text and background, and the typeface itself all matter alongside size. A 16px font with cramped line spacing and low contrast can read worse than 14px set with generous spacing and strong contrast. Size is the first lever, but readability is the combination.
About font size and readability
Font size is the most basic lever of readability, but the right size is not a single number; it depends on who is reading, on what device, and from how far away. The web has converged on clear baselines: 16px is the floor for body text, 18 to 20px is ideal for comfortable long-form reading, and anything smaller than 16px pushes most readers to squint or zoom. These figures exist because 16px is the default size every browser ships, tuned over decades to be legible at a typical screen distance.
Choosing a size well is partly accessibility and partly conversion. Text that is too small frustrates readers, fails accessibility guidelines, and quietly drives people away; text sized appropriately for the audience and distance keeps them reading. This tool helps you reason about the trade-off by relating size to viewing distance and audience, the two factors that matter most.
How readable size is reasoned
The core idea is that perceived text size depends on the angle the letters subtend at the reader's eye, which is set by physical size divided by viewing distance:
Web body baseline = 16px (browser default, 1rem) Comfortable reading = 18 to 20px Scale by distance ~ 1 inch of letter height per 10 ft Older audience = baseline x 1.25 to 1.5
- 16px baseline is the anchor: build in rem units relative to it so user settings are respected.
- Distance scaling means closer screens (phones) can use slightly smaller text and far screens (TV, signage) need much larger.
- Audience adjustment raises the size 25 to 50 percent for older or low-vision readers.
Worked example
Suppose you are designing a blog read mostly on phones (about 12 inches away) by a general adult audience, and you want comfortable long-form reading:
Start from comfortable reading band = 18 to 20px Phone viewing distance (~12 in) = slightly smaller acceptable Choose body = 17 to 18px Line height = 1.5 (so 17px -> ~26px)
Font size reference by context
Recommended body text size for common reading situations:
| Context | Viewing distance | Body size |
|---|---|---|
| Mobile app / web | ~12 in | 14 to 16px |
| Desktop website | ~24 in | 16 to 18px |
| Long-form article | ~24 in | 18 to 20px |
| Older / low-vision audience | any | 20 to 24px |
| Presentation slide | ~10 to 30 ft | 28 to 40pt+ |
| TV / 10-foot UI | ~8 ft | ~24px+ scaled |
Common pitfalls
- Going below 16px for body text. It looks tidy in a mockup but punishes real readers, especially on phones and for older eyes.
- Hard-coding pixel sizes. Use rem units so the layout honours the user's browser settings; fixed px can override accessibility preferences.
- Ignoring line height and length. Correct size with cramped lines or 120-character rows still reads poorly. Aim for 1.5 line height and 50 to 75 characters per line.
- Forgetting contrast. Light grey text on white fails accessibility regardless of size. Size and contrast work together.
- One size for every device. A size tuned for desktop is often too small on a TV and slightly large on a watch. Scale to the viewing distance.