Make it Big! The Effect of Font Size and Line Spacing on Online Readability.

12,443 views

Published on

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.

Published in: Science
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,443
On SlideShare
0
From Embeds
0
Number of Embeds
11,522
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Beymer
    Bernard
    Darroch
    Banerjee
    Bhatia
  • R1: participants might have needed "much more fixations to read the whole text"
  • Make it Big! The Effect of Font Size and Line Spacing on Online Readability.

    1. 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
    2. 2. Online Reading is a daily habit for many
    3. 3. WHICH FONT SIZE FOR BEST READABILITY?
    4. 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
    5. 5. 16 pixels 12 points
    6. 6. 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
    7. 7. 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
    8. 8. • 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.
    9. 9. 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
    10. 10. methodology
    11. 11. STUDY SETUP • screen : 17 inch TFT, 1024x768 • eye tracker : tobii 1750 • website : wikipedia (animals) • browser : firefox • font : arial
    12. 12. 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
    13. 13. Dependent Measures
    14. 14. MEAN FIXATION DURATION as objective measure for readability
    15. 15. COMPREHENSION QUESTIONS to avoid that participants just „skim“ the text
    16. 16. SUBJECTIVE READABILITY & COMPREHENSION to identify mismatch between perceived and objective performance reading
    17. 17. 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
    18. 18. results
    19. 19. Font Size
    20. 20. 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
    21. 21. 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
    22. 22. 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!
    23. 23. 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!
    24. 24. 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!
    25. 25. Line Spacing
    26. 26. 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
    27. 27. 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!
    28. 28. 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
    29. 29. 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!
    30. 30. 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!
    31. 31. conclusions
    32. 32. 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
    33. 33. STARK CONTRAST TO COMMON RECOMMENDATIONS
    34. 34. Set Chrome or Firefox to 24 (pixels) to have 18 points font size
    35. 35. 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

    ×