make it big! the effect of font size and line spacing on online readability

MAKE IT BIGThe Effect of Font Size and Line Spacing on Online Readability.

Luz Rello Martin Pielot Mari-Carmen Marcos

CHI 2016: ACM Conference on Human Factors in Computing SystemsSan Jose McEnery Convention Center, May 7 – 12 at San Jose, CA, USA

Presenter: Martin Pielot, @martinpielot

Online Reading is a daily habit for many

WHICH FONT SIZE FOR BEST READABILITY?

readability refers to the ease with which a reader can read and understand a written text. It only refers to the properties of the presentation of the text, not the content of the text itself

16 pixels 12 points

PIXELS AND POINTS• Points (pts)

– resolution-independent unit – 72 pts = 1 inch = 2.54 cm

• Pixels (px)– used to be resolution dependent– nowadays ¾ of 1 point

16 px = 12pt (*)

* https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

PREVIOUS SCIENTIFIC STUDIES

Authors Year Method Tested Sizes Best Size

Bernard et al. 2001, 2002, 2003

read-aloud 10-14 pts 14

Banerjee et al. 2011 read-aloud 10-14 pts 14

Bhatia et al. 2011 preference 10-14 pts -

Beymer & Russel 2005, 2007, 2008

eye-tracker 10-14 pts 14

• Confusing, conflicting, and evidence-lacking advice in forums

• Scientific research found „bigger is better“ but we did not find any test with fonts larger than 14 points.

IN THIS PAPER

• control group (n=104) of study to determine optimal font size for people with dyslexia

• much larger font sizes (up to 26 points)

results challenge existing insights and recommendations

methodology

STUDY SETUP

• screen : 17 inch TFT, 1024x768

• eye tracker : tobii 1750• website : wikipedia

(animals)• browser : firefox• font : arial

INDEPENDENT MEASURES

• font size (pt) : 10, 12, 14, 18, 22, 26

within-subject factor

• line spacing : 0.8, 1.0, 1.4, 1.8

between-group factor

Dependent Measures

MEAN FIXATION DURATIONas objective measure for readability

COMPREHENSION QUESTIONSto avoid that participants just „skim“ the text

SUBJECTIVE READABILITY & COMPREHENSIONto identify mismatch between perceived and objective performance

reading

PARTICIPANTS

• 104 volunteers (61 female, 43 male)• 92 studying or had finished university

• aged 14* – 54 (M = 30.24, SD = 9.13)• normal or corrected-to-normal vision

* Minors were accompanied by parents

results

Font Size

sig. effect of font sizeF(5,445) = 66.825,p < .001

large effect size(η2 = 0.159)

pairwise comparison• 10pt > than all larger• 12pt > than all larger• 14pt > than all larger• 18pt > than 22pt

MEAN FIXATION DURATION

objective readability best for 18/22/26 pts

sig. effect of font sizeF(5,445) = 5.2489, p < .001

small effect size(η2 = 0.025)

pairwise comparison• 10pt <12pt

MEAN NUMBER OF FIXATIONS

limited effect on number of fixations

sig. effect of font sizeχ2 (5) = 135.85, p < .001

pairwise comparison• 10pt < than all larger• 12pt < than all larger• 14pt < than 18pt• 26pt < than 18pt

SUBJECTIVE READABILITY

best subjective readability for 18 pt font size

sig. effect of font sizeχ2 (5) = 27.29, p < .001

sig. less correct answers for• 10 & 12 compared to 18 pt• 12 pt compared to 26 pt

COMPREHENSION SCORES

small fonts may impair comprehension

sig. effect of font sizeF (5, 363) = 18.614, p < .001

pairwise comparison• 10pt < 14pt +• 12pt < 14pt +

SUBJECTIVE COMPREHENSION

subjective comprehension impaired for 10 & 12 pt

Line Spacing

no sig. effect of line spacingF (3, 89) = 0.064, p = .978

MEAN FIXATION DURATION

no evidence re: line spacing

no sig. effect of font sizeF (3, 365) = 2.074, p = .103

SUBJECTIVE READABILITY

no evidence re: line spacing

sig. interaction effect betweenfont size x line spacingF (15, 445) = 4.098, p < .001)

small effect size(η2 = 0.034)

no interact. effect for 10-18 ptmarginal effect for 10-22 pt

MEAN FIXATION DURATION

larger fonts are affected by line spacing

sig. effect of line spacingχ2 (3) = 19.56, p < .001

sig. less correct answers for• 0.8 compared to all other

line spacings

COMPREHENSION SCORES

small line spacings may impair comprehension

sig. effect of line spacingF (3, 365) = 3.249, p = .022

pairwise comparison• 1.0 > 1.8

SUBJECTIVE COMPREHENSION

subj. comprehension impaired for largest spacing

conclusions

USE 18 POINT FONT SIZE• 18 pts and larger had best objective readability• subjective readability was highest for 18 pts

USE 1.0 or 1.4 LINE SPACING• comprehension scores were lower for 0.8• subjective comprehension was affected for 1.8

AVOID 10 AND 12 POINT FONT SIZE• comprehension scores were lowest• readability (subj + obj) was worst

STARK CONTRAST TO COMMON RECOMMENDATIONS

Set Chrome or Firefox to 24 (pixels) to have 18 points font size

MAKE IT BIGThe Effect of Font Size and Line Spacing on Online Readability.

CHI 2016: ACM Conference on Human Factors in Computing SystemsSan Jose McEnery Convention Center, May 7 – 12 at San Jose, CA, USA

18 POINT FONT SIZE (24 px) default OR slightly larger LINE SPACING10 AND 12 PTS IMPAIRED UNDERSTANDING

Presenter: Martin Pielot, @martinpielot

Luz Rello Martin Pielot Mari-Carmen Marcos