What is the optimal font size for the body of websites?
Guidelines often suggest 10, 12, or 14 points. 12 points is a number you see frequently mentioned in forums and blogs.
In 2009, Smashing Magazin found that a set of 50 very popular news pages used 13px on average. In 2013, they repeated the study and found that 14px and 16px had become the most popular font sizes. In 2015, Firefox and Chrome ship with a default of 16 pixels. However, guidelines and recommendations rarely cite scientific evidence.
Beware, though, points and pixels are not the same! Points are resolution independent. 72 points equal 1 inch. 16 pixels ususally equal 12 points.
Scientific research has been comparing font sizes 10, 12, 14 points and repeatedly found that bigger font implies better readability. This indicates that the current development of increasing font sizes in moving in the right direction. However, the larger the font becomes, the less text fits in one line. Is there a point where fonts become too large?
We were not able to find any scientific study that studies font sizes beyond 14 points. Thus, it was not clear to what extent increasing font sizes beyond 14 points improves readability.
We present results from the first, published scientific including font sizes 18, 22, and 26. In brief, the evidence suggest that readability keeps improving for larger fonts: 18 and 22 points.
We, that is with first author Luz Rello, who is currently affiliated with Carngie Mellon’s Human Computer Interaction Institute, co-author Mari-Carmen Marcos, from the Universitat Pompeu Fabra, and me, just published results from a study at ACM CHI 2016, the premier scientific conference on human factors.
The study provides evidence that objective readability (measured via eye-tracking) and comprehension of texts (number of correctly answered comprehension question) significantly improves when using larger-than-usual font sizes (18, 22, 26 points).
In this study, 104 people read Wikipedia articles with different font sizes (10, 12, 14, 18, 22, 26 points – within-subject factor) and line spacings (0.8, 1.0, 1.4, 1.8 – between-group factor) while their reading was recorded with an eye-tracker.
From the eye-tracking data, we extracted the mean fixation duration of the eye movements, which is an established proxy for objective readability. When reading, the eye does not move continuously over the text. It alters between short fixations and saccades. The shorter those fixations are, the less difficulties the reader encounters, which means that the easier to text is to read.
In our data, the mean fixation duration dropped absolutely continuously with increasing font size until 18 points. The shortest mean fixatution durations were recorded for 22 points. Subjective readability was best for 18 point font size.
Further, for each text, the participants had to answer comprehension questions. The fraction of correctly answered comprehension questions was significantly lower for font sizes 10 and 12 points. This is impressive evidence about how small font sizes impair readability to an extent where comprehension gets affected.
In the study, we also tested different line spacings (0.8, 1.0, 1.4, and 1,8). However, line spacing had only minimal effects: we found weak evidence that extreme line spacings (0.8 and 1.8) may impair readability and comprehension.
In summary, our work supports recent calls for drastically increasing font size of website bodies. Our recommendation is to use 18 points font size and default (1.0) line spacing. Just to be clear, in a standard desktop setting, you need to set your Firefox or Chrome browser to 24 pixels to achieve this. In our data, this configuration strikes the balance between having the best readability, comprehension, subjective perception scores, and allowing to fit as much text on the screen as possible.
Of course, this recommendation does not consider aethetic aspects. It is simply about maximizing readability and comprehension of websites.
The work will be presented at ACM CHI ’16: the premier Conference on Human Factors in Computing Systems in May 2016 in San Jose, CA.
Citation:
Make It Big! The Effect of Font Size and Line Spacing on Online Readability.
Luz Rello, Martin Pielot, and Mari-Carmen Marcos.
CHI ’16: ACM SIGCHI Conference on Human Factors in Computing Systems, 2016.
