A text can be beautifully written and still be tiring to read. Lines running across the whole screen, tiny type, dense paragraphs with no breathing room: these are problems of form, not content, but they drive readers away as much as muddled prose does. The good news is that they can be fixed with a few rules and a few lines of CSS.
Readability and legibility
Typography often distinguishes between two qualities. Legibility concerns individual characters: how easily a lowercase «l», a capital «I» and the digit «1» can be told apart. Readability concerns the text as a whole: how comfortable it is to read entire paragraphs without getting tired. This article deals mostly with the second, which depends more on layout than on the choice of typeface.
Line length
When a line is too long, the eye struggles to find the start of the next one; when it is too short, the reading rhythm keeps breaking. For continuous text, a range of roughly 45-75 characters per line, spaces included, is traditionally recommended, with around 65 as a good compromise. The WCAG guidelines, in the AAA-level criterion on visual presentation, set a maximum of 80 characters.
In CSS, the ch unit, equal to the width of the «0» character in the current font, is handy for expressing this limit:
.article {
max-width: 68ch;
margin-inline: auto;
}
On a wide monitor the text then stays in a comfortable, centered column instead of stretching from edge to edge.
Line height
Line height, the vertical distance between lines, is one of the most underrated parameters. Many browsers' default is too tight for long paragraphs. For continuous text, a value between 1.4 and 1.7 times the font size generally works well; WCAG, again at AAA level, recommends at least 1.5.
Longer lines need more line height, because the eye has a longer return path. Headings, on the other hand, can have tighter line height, around 1.1-1.25, because they are short and generous spacing would make them look fragmented.
Font size
For body text on screen, 16 CSS pixels is a reasonable starting point and matches browsers' default. Many reading-oriented sites choose 18 or even 20 pixels on large screens. More important than the exact number is respecting user preferences:
- express sizes in
rem, so they follow the browser setting; - do not block zoom on mobile devices;
- check that the page remains usable with text enlarged to 200%.
Perceived size varies a lot from one typeface to another: two fonts set at 16 pixels can look different in size, because the height of lowercase letters changes. That is why the choice must always be checked by eye, not just in numbers.
Paragraphs and spacing
Space between paragraphs helps people perceive structure. A value of about one line of text is a classic choice. The space before a heading should also be larger than the space after it, so the heading visually belongs to the content it introduces and not to what precedes it.
Short paragraphs, three to five sentences, suit the screen better than twenty-line blocks. Bullet lists, subheadings and key phrases in bold support scanning, which is the norm on the web: many readers skim the page looking for the part that interests them before deciding whether to read it all.
Alignment and hyphenation
On screen, left-aligned text is almost always the best choice for languages read from left to right. Justified text without good hyphenation creates uneven gaps between words, the so-called «rivers», which disrupt reading and are especially tiring for people with dyslexia. Centered text should be kept for short lines, such as headings or quotes.
Contrast and background
Text needs sufficient contrast with its background, but pure black on pure white, on very bright screens, can feel glaring to some people. A very dark grey on a slightly warm white keeps contrast well above what is needed while reducing glare. Light grey on white, on the other hand, is a frequent mistake that penalizes anyone reading in less than ideal conditions.
A starting point
html { font-size: 100%; }
body {
font-size: 1.125rem;
line-height: 1.6;
color: #1f1f1f;
background: #fdfcf9;
}
.article { max-width: 68ch; }
p + p { margin-top: 1em; }
h2 { line-height: 1.2; margin: 2em 0 0.5em; }
It is not a universal recipe, but a starting point to adapt to the chosen typeface and the kind of content.
In short
- Lines of about 45-75 characters and a line height around 1.5 make text more comfortable.
- Sizes in
remrespect user preferences and zoom. - Short paragraphs, subheadings and lists support scanning.
- Left alignment and adequate contrast avoid needless fatigue.
