Typeface, size, line spacing: what makes text readable

In every website project the typeface gets discussed. Usually for exactly one round, usually under the heading “does this fit the brand”. Font size, line spacing and line length are rarely discussed, although these three decide more about whether your text actually gets read.

This article covers both — and separates what is taste from what measurably counts.

Three terms worth keeping apart

The specialist literature distinguishes three properties that in everyday use are all called “easy to read”:

Legibility describes how well individual characters can be recognised and told apart. The classic test case is the combination of capital I, small l and the digit 1. In some typefaces these are three identical vertical strokes. Whoever then types in an order number or a password is guessing.

Readability describes how easily a whole text can be read and understood. Here typeface, size, line spacing and typesetting work together.

Appeal is the aesthetic effect. It is not incidental: a typeface people like increases the motivation to read. It just does not come first.

The order matters. A typeface that fits the brand but makes I and l indistinguishable is the wrong choice — even if it looks better.

(Rheinwerk, Barrierefreie Webseiten, ch. 6.3)

The typeface

The WCAG forbid not a single typeface. There is no list of permitted fonts and no check that fails a font. What there is are recommendations from people who have dealt with this seriously.

The three groups, briefly:

Serif typefaces have small finishing strokes at the ends of the letters — Times New Roman is the standard example. In print they are very readable, because the serifs visually connect the letters and guide the eye along the line. On low-resolution screens they used to look mushy. With today's displays, this old argument against serifs on the web hardly applies any more.

Egyptienne or slab serif typefaces have strong, block-like serifs — Rockwell, for example. Striking and readable in headings and short texts, less suited to long reading because of their heaviness.

Sans-serif typefaces have smooth letter endings and usually an even stroke width — Arial, Verdana. They look modern and read well on screens. In long printed texts they tire the reader sooner, because the letters seem less connected.

The concrete recommendation, and it comes from the German Federation of the Blind and Partially Sighted (DBSV) via leserlich.info: humanist sans-serif typefaces. That is, those whose forms are based on handwriting and are built more openly — Calibri, Verdana, Noto Sans, Open Sans, among the commercial ones Frutiger, for example. That matches the classification under DIN 16518.

Three typefaces built for difficult reading situations, all available through Google Fonts:

• Atkinson Hyperlegible — developed by the Braille Institute, with deliberately differently shaped letters that are otherwise confused.
• Lexend — designed for reading speed.
• OpenDyslexic — with weighted descenders, meant for readers with dyslexia.

What to look out for concretely when choosing:

• Are I, l and 1 distinguishable? Type them next to each other and look.
• Are c, e and o clearly open, or do the curves almost close? Closed forms are harder to tell apart in poor light.
• How big is the difference between the stem and the hairline? The stem is the load-bearing, thick stroke of a letter, the hairline the fine counter-stroke — in an H the two thick verticals against the thin crossbar. A very high contrast between the two looks elegant and becomes a problem at small sizes.

The font size

The WCAG prescribe no minimum size. They prescribe contrasts that depend on the size — that is something different.

The recommendation is: at least 16 px. That is also the default of most browsers and was the desktop standard for a long time. The trend is now towards 18 to 24 px for running text, depending on the typeface. The DBSV's font size calculator arrives at values around 22 px for desktop running text.

On the smartphone, 16 px is also the standard. It is occasionally reduced to 14 px — I advise against that, and so does the specialist literature.

The reason the size cannot be set absolutely is the reading distance. To the smartphone it is about 30 cm, to the monitor about 70 cm. On top of that come individual visual acuity — DIN 1450 assumes over 70 percent, for visually impaired people and seniors 40 to 50 percent — and the surroundings. DIN EN ISO 9241-303 for electronic displays derives values from this by calculation that are usually well above 24 px.

In practice that means: 16 px is the lower limit, not the goal. If you are torn between 16 and 20 px, take 20.

Relative instead of absolute units. Set the base size once and derive everything else relative to it:

:root {
  font-size: 100%;   /* respects the user's browser setting */
}

body {
  font-size: 1.125rem;
}

The difference is not theoretical. Whoever has turned up the font size in the browser — and more people do than you would think — still gets the small text with a value in px. With rem their setting takes effect.

For the heading levels you need a factor, not individual decisions. With a 16 px base and a factor of 1.25 you get: H4 = 20 px, H3 = 25 px, H2 = 31 px, H1 = 39 px. Common factors are between 1.2 and 1.5. You can play this through at modularscale.com.

(Rheinwerk, Barrierefreie Webseiten, ch. 6.3)

Line spacing, line length, letter spacing

Here lie the errors most often overlooked, because they do not feel like errors — the text does appear, after all.

Line spacing: at least 120 percent of the font size. That is the absolute lower limit so that the ascenders and descenders of neighbouring lines do not touch. The WCAG recommendation for good presentation is 1.5 times line spacing within a paragraph, and spacing between paragraphs of at least 1.5 times the line spacing.

There is one connection worth knowing: the longer the lines, the larger the line spacing should be. At the end of the line the eye has to jump back and find the next line. With long lines that jump is hard, and larger spacing helps. With short lines — on a smartphone, say — the line spacing can be correspondingly smaller.

Line length: at most about 80 characters including spaces, on desktop. Lines that are too long break the reading flow and tire the reader. That is why a block of text across the full width of a 27-inch monitor is unreadable, even when font size and contrast are right. In CSS:

.beitrag p {
  max-inline-size: 70ch;
  line-height: 1.6;
}

The unit ch is based on the character width of the typeface used, so it is exactly the right unit for this rule.

No justified text. Justification creates word spaces of different sizes, in the worst case real holes that run through the paragraph as vertical white channels. That measurably hinders reading and hits people with reading difficulties especially hard. Left-aligned ragged text is the right choice on the web.

No capitals for longer passages. CAPITAL LETTERS are harder to read, because their forms differ less than those of lowercase letters — the upper half of the letters, which carries most of the information when reading, is clearly more uniform in capitals. On top of that comes plain practice: we read almost only mixed case. For a single word on a button that is defensible, for a heading already borderline, for a paragraph wrong.

Letter spacing. The optimal spacing between characters is about 35 percent of the x-height — that is, the height of a small x. A practical special case from DIN 1450: with light text on a dark background, letter spacing should be increased by about two percent, because light characters visually run together. Whoever builds a dark variant of their website should take this along.

No empty paragraphs as spacers. A <p></p> without content is still processed by screen readers and usually announced as a short pause or as a “blank line”. For the listener it creates the impression that something is missing. Spacing belongs in CSS, not in empty elements.

(Rheinwerk, Barrierefreie Webseiten, ch. 6.4)

What happens when someone makes the text bigger

This is the point where websites actually break — and the point almost nobody checks.

There are four criteria on this, and all are level AA, so relevant for the legal requirement:

1.4.4 Resize Text. Text has to be enlargeable to 200 percent without loss of content or function. Without special software, simply through the browser zoom. Buttons have to stay usable, texts must not be cut off.

1.4.10 Reflow. At 400 percent enlargement you may only have to scroll in one direction — either vertically or horizontally, not both. In practice that corresponds to a viewport of 320 × 256 CSS pixels. The most honest test for this is not the zoom in the desktop browser, but looking at the page on a real smartphone; the result often differs.

1.4.12 Text Spacing. When a user changes the spacing through their own settings, nothing may be lost. The values at which the page still has to work:

Property	Value
Line height	at least 1.5 times the font size
Paragraph spacing	at least 2 times the font size
Letter spacing	at least 0.12 times the font size
Word spacing	at least 0.16 times the font size

The typical break here: a button with a fixed height whose text runs out at the bottom with larger line spacing. Or a tile with a fixed height in which the text is cut off.

1.3.4 Orientation. The page has to work in portrait and landscape. The orientation must not be locked.

And the viewport meta tag. A detail with a big effect:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

That is how it belongs. What does not belong there are maximum-scale=1.0 or user-scalable=no. Both prevent someone from zooming in on the phone. It is in a surprising number of older themes and builder exports, and it is one of the cases where a single line makes a website practically unusable for visually impaired users.

(Rheinwerk, Barrierefreie Webseiten, ch. 6.5)

Text in images

A special case that still comes up regularly: text saved as a graphic. An offer banner, a price table as a PNG, a greeting card with text, an infographic that contains the actual statement.

What does not work about it:

1. Screen readers do not recognise the text as text. What is written there only exists for a blind user if it is also in the alternative text — and it is usually not there in full.
2. It becomes pixelated when enlarged. It also does not follow the user's letter and line spacing settings and does not wrap. On a smartphone, a price table as an image either becomes tiny or has to be pushed sideways.
3. The contrast does not adapt. Whoever has set their own background colour may get unreadable text with a graphic on a transparent background.
4. Search engines do not read it. For findability the text simply does not exist — and for AI systems evaluating your page, neither.

The rule on this, criterion 1.4.5 at level AA: use real text, styled with CSS, instead of images of text. Two exceptions are provided for — if the text image can be adapted to the user's needs, or if exactly this presentation is essential to the statement. At the higher level AAA (criterion 1.4.9) almost everything falls away except pure decoration and logos.

In practice that means for you: the company logo may be an image with text. Nothing else may.

If you need a graphic that contains text, SVG is the better route — the text stays text there, scales cleanly and can be coloured through CSS.

(Rheinwerk, Barrierefreie Webseiten, ch. 6.6)

How to check it yourself

The zoom test. Open your page and press Ctrl and + five times. That is about 200 percent. See whether everything is still there: headings, buttons, menu, forms. Then continue to 400 percent and check whether you have to scroll in two directions.

The font size test in the browser. Set the default font size to 20 or 24 px in the browser settings and reload your page. If nothing changes, your sizes are fixed in px.

The text spacing bookmarklet. At bitvtest.de in the tool list there is a bookmarklet that applies the four spacing values from criterion 1.4.12 to the current page. One click, and you see at once where text runs out of its box.

The source look at the viewport tag. Right-click, view page source, search for viewport. If it says user-scalable=no or maximum-scale, that is a finding.

Count the line length. Not really count — but if a line of your running text runs across more than half the screen width of a large monitor, it is too long.

The DBSV's font size calculator at leserlich.info/werkzeuge/schriftgroessenrechner/ calculates a minimum size under DIN 1450 from reading distance and assumed visual acuity. Useful when you have to justify a decision.

What to do

Set the base right once, instead of repairing individual places. Font size, line height and line length belong in the basic design, not in individual blocks. In a cleanly built system these values sit in one place and take effect everywhere.

Take the larger variant. With font size, line spacing and paragraph spacing, the error in practice is almost always on the too-tight side. I have yet to meet a client who complained about too much air.

Avoid fixed heights. Buttons, tiles and boxes should grow with their content. Fixed heights are the most common reason a page breaks with larger text.

Check the typeface before it is in the whole website. Type a real paragraph in the candidate typeface, at the planned size, with digits and with the critical letters. Do not look at the alphabet at 60 px — that is not how the typeface will be used later.

And the practical note for WordPress: if your fonts are loaded from a third-party server, that is a topic of its own — both for loading time and for data protection. There is an article of its own on that.

Sources

• Rheinwerk, Barrierefreie Webseiten, ch. 6.3 (typeface and font size) — legibility, readability and appeal as three properties, stem and hairline, the three typeface groups with their properties, the recommendation of humanist sans-serif typefaces by the DBSV via leserlich.info and the reference to DIN 16518, Atkinson Hyperlegible, Lexend and OpenDyslexic, no WCAG requirement on the typeface, 16 px as the minimum recommendation and 18–24 px as the trend, DIN EN ISO 9241-303 and DIN 1450, reading distances of 30 cm and 70 cm, assumptions on visual acuity, the heading scale with factor 1.25 and the tools font size calculator and modularscale.com.
• Rheinwerk, Barrierefreie Webseiten, ch. 6.4 (spacing and spelling) — line spacing from 120 percent, the connection between line length and line spacing, an upper limit of about 80 characters per line, WCAG 1.4.8 with line spacing 1.5 and paragraph spacing 1.5, no justified text, capitals and the poorer distinguishability of their upper letter halves according to the DBSV, letter spacing of about 35 percent of the x-height and the increase by two percent for light text on a dark background under DIN 1450, empty paragraph elements and their announcement by screen readers.
• Rheinwerk, Barrierefreie Webseiten, ch. 6.5 (zoom and adjustable text spacing) — WCAG 1.4.4 with 200 percent, 1.4.10 Reflow with 400 percent and 320 × 256 CSS pixels together with the recommendation to check on a real device, 1.4.12 with the four spacing values, 1.3.4 Orientation, the viewport meta tag and the warning against fixed zoom levels, the text spacing bookmarklet at bitvtest.de.
• Rheinwerk, Barrierefreie Webseiten, ch. 6.6 (images of text) — the four disadvantages of text graphics, WCAG 1.4.5 with its two exceptions, WCAG 1.4.9 and the special position of logos, the effect on findability.
• Atlas, accessibility/criteria/ — the classification of the named success criteria by principle, guideline and conformance level.
• Own audit practice — the order of the check steps, the note on user-scalable=no in older themes and builder exports, fixed element heights as the most common breaking point with enlarged text, and the recommendation to judge candidate typefaces on a real paragraph rather than on the alphabet.