Experiment highlighting the drastic effect of font size and line spacing on readability.
* readability improved significantly until 18 points
* comprehension was impaired for 10 and 12 points
* line spacing has little effect, but extreme deviations from default may impair comprehension
Presented at ACM CHI 2016: the top conference for Human-Computer Interaction.
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
1. MAKE IT BIG
The 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 Systems
San Jose McEnery Convention Center, May 7 – 12 at San Jose, CA, USA
Presenter: Martin Pielot, @martinpielot
4. 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
12. 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
13.
14. 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
15. • 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.
16. 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
28. 10 12 14 18 22 26
0.100.200.300.40
Font Size
FixationDurationMean(ms)
0.8 1
0.100.200.300.40
Line Sp
FixationDurationMean(ms)
FixationDurationMean(s)
FixationDurationMean(s)
Font Size Line Sp
sig. effect of font size
F(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
29. sig. effect of font size
F(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
10 12 14 18 22 26
0100200300400500600
Font Size
FixN
30. 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
0%!
20%!
40%!
60%!
80%!
100%!
10! 12! 14! 18! 22! 26!
ReadabilityRating!
Font Size!
very good!
good!
neutral!
bad!
very bad!
31. 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
0%!
20%!
40%!
60%!
80%!
100%!
10! 12! 14! 18! 22! 26!
CorrectResponses!
Font Size!
Wrong!
Correct!
32. sig. effect of font size
F (5, 363) = 18.614, p < .001
pairwise comparison
• 10pt < 14pt +
• 12pt < 14pt +
SUBJECTIVE COMPREHENSION
subjective comprehension impaired for 10 & 12 pt
0%!
20%!
40%!
60%!
80%!
100%!
10! 12! 14! 18! 22! 26!
ComprehensionRating!
Font Size!
very good!
good!
neutral!
bad!
very bad!
34. 0.8 1 1.4 1.8
0.100.200.300.40
Line Spacing
FixationDurationMean(ms)FixationDurationMean(s)
Line Spacing
no sig. effect of line spacing
F (3, 89) = 0.064, p = .978
MEAN FIXATION DURATION
no evidence re: line spacing
35. no sig. effect of font size
F (3, 365) = 2.074, p = .103
SUBJECTIVE READABILITY
no evidence re: line spacing
0%!
20%!
40%!
60%!
80%!
100%!
10! 12! 14! 18! 22! 26!
ReadabilityRating!
Font Size!
very good!
good!
neutral!
bad!
very bad!
0%!
20%!
40%!
60%!
80%!
100%!
0.8! 1! 1.4! 1.8!
ReadabilityRating!
Line Spacing!
very good!
good!
neutral!
bad!
very bad!
36. sig. interaction effect between
font size x line spacing
F (15, 445) = 4.098, p < .001)
small effect size
(η2 = 0.034)
no interact. effect for 10-18 pt
marginal effect for 10-22 pt
MEAN FIXATION DURATION
larger fonts are affected by line spacing
0.000.100.200.30
Fontsize
FixationDuration(mean)
10 12 14 18 22 26
●
● ●
●
● ●
● ●
●
● ●
●
●
●
1.4
1.8
0.8
1
37. 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
0%!
20%!
40%!
60%!
80%!
100%!
0.8! 1! 1.4! 1.8!
CorrectResponses!
Line Spacing!
Wrong!
Correct!
38. sig. effect of line spacing
F (3, 365) = 3.249, p = .022
pairwise comparison
• 1.0 > 1.8
SUBJECTIVE COMPREHENSION
subj. comprehension impaired for largest spacing
0%!
20%!
40%!
60%!
80%!
100%!
0.8! 1! 1.4! 1.8!
ComprehensionRating!
Line Spacing!
very good!
good!
neutral!
bad!
very bad!
40. 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
42. Set Chrome or Firefox to 24 (pixels)
to have 18 points font size
43. MAKE IT BIG
The Effect of Font Size and Line Spacing on Online Readability.
CHI 2016: ACM Conference on Human Factors in Computing Systems
San Jose McEnery Convention Center, May 7 – 12 at San Jose, CA, USA
18 POINT FONT SIZE (24 px)
default OR slightly larger LINE SPACING
10 AND 12 PTS IMPAIRED UNDERSTANDING
Presenter: Martin Pielot, @martinpielot
Luz Rello Martin Pielot Mari-Carmen Marcos
Hinweis der Redaktion
Beymer
Bernard
Darroch
Banerjee
Bhatia
R1: participants might have needed "much more fixations to read the whole text"