Choosing a typeface is the fun part of typography. It's also, for long reading, one of the least important. A beautiful face set too small, too wide or too tight is tiring to read. A plain one set well disappears, and the reader just reads. Most of the work is in the setting.
Measure: how long a line should be
Lines that run too long make the eye's return trip to the next line hard; readers lose their place. Lines that are too short break the rhythm and fill the page with ragged edges. The long-standing guidance from print, roughly 45 to 75 characters per line, holds up well on screens. We aim for the middle of that range for body text.
On the web, setting a maximum width in ch units ties the measure to the font itself, so it stays right whatever size the reader chooses.
Leading: the space between lines
Body text usually reads best with line height around 1.5 to 1.7 times the font size. Longer lines need a little more; headings need less, often 1.05 to 1.2, so a two-line heading still reads as one unit. WCAG also asks that content keeps working when people increase line height to 1.5 and paragraph spacing to twice the font size, so layouts shouldn't depend on tight spacing.
Good typography is invisible. Readers notice only when it's missing.
Size: start bigger than you think
Body text that looks fine on a designer's large monitor can be tiring on a phone at arm's length. We rarely set long-form body text below 17 pixels on the web. On iPhone, we use the system's text styles so that text follows the reader's Dynamic Type setting, and we test the largest accessibility sizes, where layouts most often break.
Contrast: dark enough, not harsh
Very light gray body text is a common style and a common problem. It often fails contrast guidelines and is genuinely hard to read in daylight. The fix doesn't have to be pure black: a very dark, slightly warm or cool ink on an off-white background is comfortable for long sessions and comfortably passes.
Pairing: one voice, one workhorse
A reliable pattern is a characterful face for headings and a highly legible sans-serif for everything else. This site, for example, pairs Fraunces, a soft serif with optical sizes, for headings with Inter, designed for screens, for text. The heading face gives the page its voice; the text face stays out of the way.
Variable fonts make this cheaper than it used to be: one file covers every weight, and some include optical sizes that adjust letter shapes for small and large settings automatically.
The details that add up
- Use real quotation marks and apostrophes, not straight ones.
- Let headings balance across lines so the last line isn't a single word.
- Keep paragraphs short on screens; long blocks look harder than they are.
- Load fonts from your own domain and choose sensible fallbacks, so text is readable immediately and nothing is shared with third parties.
- Never justify body text on the web; uneven word spacing creates rivers of white.
None of these will be noticed on their own. Together, they're the difference between a page people skim and a page people read.