Tag: font size

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.

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.

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.

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.