Size guidelines for text legibility

TL;DR: For creating a legible text use font size of 18 pixels or larger, with line spacing of at least 120% —with larger line spacings being more likeable. Adding at least some margin around the text, makes it more preferable.

Deciding which font size to use can be an endeavour. Whether deciding for a blog post or a base font size for a design system, we have combined a list of relevant research and guidelines to help with.

Which font size is the best for large texts?

When the visitor’s goal is to gather information by reading (somewhat) large paragraphs, 18 pixels is the optimal font size. When testing eye fixation and subjective readability of text, Rello et al. found that as font size increases, the readability of the text increases as well [1]. This is backed by a huge body of research [2, 3]. However Rello et al uncovered that the readability uptrend ceils at about 18 pixels, whilst in larger font sizes (26 pixels) the readability flattens out and individual perceived readability may even worsen, although not in a statistically significant way.

Different font sizes taken from Google's Material UI. — Material type system. Source: Material.io

Which line spacing improves readability?

A single number for line spacing can be a bit more tricky to answer. For starters, there seems to be no link between line spacing and readability [1,4] —starting at 100% line spacing and measuring upwards. However, there is data to support better text comprehension for line spacing starting from 120% to 200% (double spacing) [1]. At the same time, larger line spacing has been shown to improve subjective comprehension [1] as well as being preferred over smaller spacings; regardless of age people seem to prefer 1.5 and double spacing over regular [4]. Although the latter needs more research.

Two versions of text. On the left with 120% line height, and on the right with 160% line height. — Line height 120% vs 160%

Small or big line length and what’s the difference with side margins?

Line length can be a misleading measurement regarding readability. It can be measured either by physical width of the line (e.g. 600px) or numbers of words per line combined with the font size (e.g. 40 words with 18px font size). When talking about physical length of the line, there seems to be no correlation between readability and length [5] for medium sized lengths (extremely small and extremely large lengths are affecting readability negatively). From the same meta-analysis, we gather that more dense character spacing, resulting in larger line length, results in higher reading speed while not affecting readability. Nevertheless, increasing line length should come with an increase in line spacing; to aid with visual differentiation when needed to switch to the next line, so that readability will not be impacted [5].

Side margins in text

Side margins have been shown to not be the only determining factor for improving readability [6] However, there is a strong correlation of visitors’ subjective preference for text with large margins over text with no margin at all. Youngman and Scharff demonstrated that although the efficiency of reading stays the same between a 10 cm (4 inches) with various margins, and a 20 cm (8 inches) text without any margin, the people participating in the experiment rated the texts with margin as more likeable [6].