A page of text can be perfectly legible and still tiring. The difference comes down to a few settings nobody notices when they are right. On screen they matter even more, because we read in very different conditions: a large monitor at work, a phone on the subway, an e-reader at night.
Source: NYC Wanderer (Kevin Eng), Wikimedia Commons, CC BY-SA 2.0.
Line length
This is the setting that matters most. Typographic tradition recommends 45 to 75 characters per line for running text, with an ideal often quoted around 66. Beyond that, the eye struggles to find the start of the next line. Below it, reading becomes choppy.
A site that spreads its text across a 27-inch screen is wrong, however beautiful its typeface.
Line spacing
Tight text suffocates. For running text on screen, a line height of 1.5 times the font size is a good starting point. The longer the lines, the more air they need. Headings need far less: a large title with too much leading falls apart.
Size and typeface
On the web, 16 pixels has become a reasonable minimum, and 18 to 20 pixels suit long reading better. The serif versus sans-serif debate has lost most of its stakes since screens gained resolution. Pick a typeface designed for text, with clearly distinct letters, and let readers change it if they want.
article {
max-width: 66ch;
font-size: 1.125rem;
line-height: 1.6;
hyphens: auto;
}Contrast
Pure black on pure white isn't always the most comfortable, especially in a dark room. A very dark grey on a slightly off-white background is easier on the eyes, as long as contrast stays high. WCAG accessibility rules require a ratio of at least 4.5 to 1 for body text.
The ratio is computed from the relative luminance of the two colors, \( L_1 \) being the lighter one:
\[ C = \frac{L_1 + 0.05}{L_2 + 0.05} \]
That is also why a sepia or dark mode helps. Nobody reads the same way at noon and at midnight.
Leave the choice
The best typography is the kind readers can adjust. Poor eyesight, dyslexia, difficult light: no default suits everyone. A few good options beat a panel of twenty sliders.
Margins and vertical rhythm
We talk a lot about letters and rather little about the space around them. A column of text stuck to the edge of a phone screen feels cramped. A few pixels of margin are enough to let it breathe, and the room gained by removing them never makes up for the discomfort.
The space between paragraphs matters too. It should be clearly larger than the line spacing, otherwise the blocks merge, but not so large that each one drifts off on its own. The same logic applies to subheadings: a heading must sit closer to the text it announces than to the text before it. If the distance is the same on both sides, the eye can no longer tell what it belongs to.
Details you barely see
Every language has typographic habits, and they get lost easily on screen. Real quotation marks and a real curved apostrophe cost nothing to produce and change the look of a text. French needs non-breaking spaces before colons and question marks, so that a sign never ends up alone at the start of a line.
Hyphenation is more delicate. On a narrow column, like a phone's, justified text without hyphenation leaves ugly gaps between words. If the browser can't break words correctly in the language concerned, align left and accept an uneven right edge. It bothers readers far less than you might think.
Links, images and interruptions
A link should be visible without shouting. A thin underline, slightly lowered from the baseline, does the job very well. A bright color in the middle of a paragraph draws the eye and holds it there, while the reader wanted to finish the sentence.
Everything inserted into the text interrupts reading: ad slots, subscription prompts, recommended articles in the middle of a paragraph. Strictly speaking that isn't a typography problem, but it is a legibility problem, and probably the most widespread one. It is one of the reasons so many people prefer a reading mode to the original layout.
Test on real texts
A mockup filled with placeholder Latin always lies a little. Its words have a regular length, and there is no endless proper noun, no table, no three-line quotation. Test with real articles, long ones, in your readers' language. Read one to the end, on a phone, in the evening. It is less scientific than an accessibility audit, but you learn different things.