make it big! the effect of font size and line spacing on online readability
TRANSCRIPT
![Page 1: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/1.jpg)
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
![Page 2: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/2.jpg)
Online Reading is a daily habit for many
![Page 3: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/3.jpg)
WHICH FONT SIZE FOR BEST READABILITY?
![Page 4: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/4.jpg)
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
![Page 5: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/5.jpg)
![Page 6: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/6.jpg)
![Page 7: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/7.jpg)
![Page 8: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/8.jpg)
![Page 9: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/9.jpg)
![Page 10: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/10.jpg)
16 pixels 12 points
![Page 11: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/11.jpg)
![Page 12: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/12.jpg)
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
![Page 13: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/13.jpg)
![Page 14: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/14.jpg)
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
![Page 15: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/15.jpg)
• 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.
![Page 16: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/16.jpg)
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
![Page 17: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/17.jpg)
methodology
![Page 18: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/18.jpg)
![Page 19: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/19.jpg)
STUDY SETUP
• screen : 17 inch TFT, 1024x768
• eye tracker : tobii 1750• website : wikipedia
(animals)• browser : firefox• font : arial
![Page 20: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/20.jpg)
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
![Page 21: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/21.jpg)
Dependent Measures
![Page 22: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/22.jpg)
MEAN FIXATION DURATIONas objective measure for readability
![Page 23: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/23.jpg)
COMPREHENSION QUESTIONSto avoid that participants just „skim“ the text
![Page 24: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/24.jpg)
SUBJECTIVE READABILITY & COMPREHENSIONto identify mismatch between perceived and objective performance
reading
![Page 25: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/25.jpg)
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
![Page 26: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/26.jpg)
results
![Page 27: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/27.jpg)
Font Size
![Page 28: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/28.jpg)
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
![Page 29: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/29.jpg)
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
![Page 30: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/30.jpg)
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
![Page 31: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/31.jpg)
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
![Page 32: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/32.jpg)
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
![Page 33: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/33.jpg)
Line Spacing
![Page 34: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/34.jpg)
no sig. effect of line spacingF (3, 89) = 0.064, p = .978
MEAN FIXATION DURATION
no evidence re: line spacing
![Page 35: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/35.jpg)
no sig. effect of font sizeF (3, 365) = 2.074, p = .103
SUBJECTIVE READABILITY
no evidence re: line spacing
![Page 36: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/36.jpg)
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
![Page 37: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/37.jpg)
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
![Page 38: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/38.jpg)
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
![Page 39: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/39.jpg)
conclusions
![Page 40: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/40.jpg)
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
![Page 41: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/41.jpg)
STARK CONTRAST TO COMMON RECOMMENDATIONS
![Page 42: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/42.jpg)
Set Chrome or Firefox to 24 (pixels) to have 18 points font size
![Page 43: Make it Big! The Effect of Font Size and Line Spacing on Online Readability](https://reader033.vdocuments.net/reader033/viewer/2022042907/588794151a28ab5b1a8b58c3/html5/thumbnails/43.jpg)
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