Optimal Font Size for Web Pages (CHI 2016)

What is the optimal font size for the body of websites?

Setup of the eye-tracking studyGuidelines 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.

Mean fixation duration per font size
Mean fixation duration per font size. Lower fixation durations mean that the text is easier 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.

Fraction of correctly answered comprehension questions per font size condition
Fraction of correctly answered comprehension questions per font size condition

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.

Share this:

Use 18pt Font Size for Readers with Dyslexia

Dyslexia: a common reading disability

Dyslexia is a neurological reading disability, which impairs a person’s ability to read and write. In the media, we often hear about dyslexia as a gift in the context of famous people, such as Steve Jobs. However, in reality, depending on the language, a significant chunk of the people suffer from dyslexia, e.g. 10 to 17.5% in the US. For most of these, dyslexia is not a gift: the most common way of identifying dyslexia in children is bad performance in our reading-centric education system.

Can the right presentation parameters improve reading?

The good news is that reading increasingly takes place via electronic displays, where we can adapt the presentation of text to make it easier to read for people with dyslexia. Therefore, led by Luz, we (Luz Rello, Martin Pielot, Mari-Carmen Marcos, and Roberto Carlini) set out to find optimal values for the most simple parameters of presentation: font size and line spacing.

Eye-tracking study exploring font size and line spacing

The study was conducted by Luz Rello in the Universitat Pompeu Fabra (UPF) in Barcelona, Spain. 28 people (15f, 13m), aged 14-38, with a confirmed diagnosis of dyslexia took part in the study. They were asked to read Wikipedia articles that were presented with different font sizes and line spacings. The study used eye tracking and questionnaires to measure readability and comprehension.

The experiment compared:

  • Font sizes: 10, 12, 14, 18, 22, and 26 pt.
  • Line spacings: 0.8, 1.0, 1.4, and 1.8.

Findings

To make a long story short, line spacing did not have much of an impact. Only 1.8 line spacing lead to worse comprehension compared to 0.8 line spacing.

Regarding font size, however, the results were surprising. When we look for optimal font size in the web, we either find soft recommendations, such as “allow to adjust
or values around 12pt / 14pt.

However, our results provide strong evidence that for people with dyslexia, readability and comprehensibility of a text increases with font size, which an optimum around 18pt.

In particular, we found that:

  • The objective readability, which is indicated by the fixation duration recorded with the eye-tracker, steadily increased until 18pt.
  • The subjective readability was highest for 18pt and 22pt.
  • The subjective comprehensibility was highest for the three largest fonts: 18pt, 22pt, 26pt.

Conclusions: use 18pt font size for your website

Hence, when designing a website that shall be friendly to readers with dyslexia (remember, 10-17.5% of the population!), use large fonts. Since there was no improvement at larger font sizes, 18 pt font size hits the sweet spot.

Complete report

The complete scientific report can be found below.

Luz Rello, Martin Pielot, Mari-Carmen Marcos and Roberto Carlini.
Size Matters (Spacing not): 18 Points for a Dyslexic-friendly Wikipedia.
W4A ’13: 10th International Cross-Disciplinary Conference on Web Accessibility, 2013.

This work was published at the 10th International Cross-Disciplinary Conference on Web Accessibility, held 13-15th May 2013 in Rio de Janeiro, Brazil.

 

Share this: