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
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
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
16 pixels 12 points
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
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
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
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
Make it Big! The Effect of Font Size and Line Spacing on Online Readability.
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 DURATION
as objective measure for readability
COMPREHENSION QUESTIONS
to avoid that participants just „skim“ the text
SUBJECTIVE READABILITY & COMPREHENSION
to 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
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
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
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!
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!
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!
Line Spacing
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
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!
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
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!
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!
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 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

More Related Content

PPTX
Boredom-Triggered Proactive Recommendations
PPTX
When Attention is not Scarce – Detecting Boredom from Mobile Phone Usage
PDF
Research review - the effects of font and formating on the readability of tex...
PDF
15 TYPE RULES (Intro to GD, Wk 11)
PDF
Insights into Cognitive Web Accessibility
PDF
Typography & WordPress - WordCamp Rochester 2016
PDF
Typography 101 nr (1)
PDF
Typography & WordPress - WordCamp Hamilton 2015
Boredom-Triggered Proactive Recommendations
When Attention is not Scarce – Detecting Boredom from Mobile Phone Usage
Research review - the effects of font and formating on the readability of tex...
15 TYPE RULES (Intro to GD, Wk 11)
Insights into Cognitive Web Accessibility
Typography & WordPress - WordCamp Rochester 2016
Typography 101 nr (1)
Typography & WordPress - WordCamp Hamilton 2015

Similar to Make it Big! The Effect of Font Size and Line Spacing on Online Readability. (20)

PDF
15 points gd
PDF
Typography3 bh
PPTX
Towards Universally Accessible Typography: A Review of Research on Dyslexia
PPTX
Accessible written content hci city 180619
PDF
NPR Design Research: Story Page Legibility
PPTX
Font new edit
PDF
Typography in Business Communication
PPT
Eva Anderson - Graphic Design for Readability
PPTX
Presentation 1 asgardia
PDF
Typography & WordPress
PPTX
Message design
KEY
Responsive Web Design & Typography
PDF
PDF
[DevDay2019] Spacing and Typography, keys to a professional UI design - By Ng...
PPTX
Format Matters - How presentation affects understanding
PPTX
1.01 Typography Usability and Readability
PPT
Typographic Designs Form & Communication
PDF
Type standards[1]
PDF
Visual Design Best Practices for Handouts
15 points gd
Typography3 bh
Towards Universally Accessible Typography: A Review of Research on Dyslexia
Accessible written content hci city 180619
NPR Design Research: Story Page Legibility
Font new edit
Typography in Business Communication
Eva Anderson - Graphic Design for Readability
Presentation 1 asgardia
Typography & WordPress
Message design
Responsive Web Design & Typography
[DevDay2019] Spacing and Typography, keys to a professional UI design - By Ng...
Format Matters - How presentation affects understanding
1.01 Typography Usability and Readability
Typographic Designs Form & Communication
Type standards[1]
Visual Design Best Practices for Handouts
Ad

Recently uploaded (20)

PPT
Chapter 6 Introductory course Biology Camp
PDF
Cosmology using numerical relativity - what hapenned before big bang?
PPT
THE CELL THEORY AND ITS FUNDAMENTALS AND USE
PDF
Chapter 3 - Human Development Poweroint presentation
PPTX
Preformulation.pptx Preformulation studies-Including all parameter
PPTX
ELISA(Enzyme linked immunosorbent assay)
PDF
Social preventive and pharmacy. Pdf
PDF
Metabolic Acidosis. pa,oakw,llwla,wwwwqw
PDF
THE-VITAL-ROLE-OF-MITOCHONDRIAL-RESPIRATION-IN-PLANT-GROWTH-AND-DEVELOPMENT.pdf
PPT
Enhancing Laboratory Quality Through ISO 15189 Compliance
PPT
Animal tissues, epithelial, muscle, connective, nervous tissue
PDF
Micro 4 New.ppt.pdf thesis main microbio
PDF
Packaging materials of fruits and vegetables
PPTX
Platelet disorders - thrombocytopenia.pptx
PDF
Is Earendel a Star Cluster?: Metal-poor Globular Cluster Progenitors at z ∼ 6
PDF
The Future of Telehealth: Engineering New Platforms for Care (www.kiu.ac.ug)
PDF
final prehhhejjehehhehehehebesentation.pdf
PPTX
Presentation1 INTRODUCTION TO ENZYMES.pptx
PPT
Biochemestry- PPT ON Protein,Nitrogenous constituents of Urine, Blood, their ...
PPTX
HAEMATOLOGICAL DISEASES lack of red blood cells, which carry oxygen throughou...
Chapter 6 Introductory course Biology Camp
Cosmology using numerical relativity - what hapenned before big bang?
THE CELL THEORY AND ITS FUNDAMENTALS AND USE
Chapter 3 - Human Development Poweroint presentation
Preformulation.pptx Preformulation studies-Including all parameter
ELISA(Enzyme linked immunosorbent assay)
Social preventive and pharmacy. Pdf
Metabolic Acidosis. pa,oakw,llwla,wwwwqw
THE-VITAL-ROLE-OF-MITOCHONDRIAL-RESPIRATION-IN-PLANT-GROWTH-AND-DEVELOPMENT.pdf
Enhancing Laboratory Quality Through ISO 15189 Compliance
Animal tissues, epithelial, muscle, connective, nervous tissue
Micro 4 New.ppt.pdf thesis main microbio
Packaging materials of fruits and vegetables
Platelet disorders - thrombocytopenia.pptx
Is Earendel a Star Cluster?: Metal-poor Globular Cluster Progenitors at z ∼ 6
The Future of Telehealth: Engineering New Platforms for Care (www.kiu.ac.ug)
final prehhhejjehehhehehehebesentation.pdf
Presentation1 INTRODUCTION TO ENZYMES.pptx
Biochemestry- PPT ON Protein,Nitrogenous constituents of Urine, Blood, their ...
HAEMATOLOGICAL DISEASES lack of red blood cells, which carry oxygen throughou...
Ad

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
  • 2. Online Reading is a daily habit for many
  • 3. WHICH FONT SIZE FOR BEST READABILITY?
  • 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
  • 10. 16 pixels 12 points
  • 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
  • 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
  • 19. STUDY SETUP • screen : 17 inch TFT, 1024x768 • eye tracker : tobii 1750 • website : wikipedia (animals) • browser : firefox • font : arial
  • 20. 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
  • 22. MEAN FIXATION DURATION as objective measure for readability
  • 23. COMPREHENSION QUESTIONS to avoid that participants just „skim“ the text
  • 24. SUBJECTIVE READABILITY & COMPREHENSION to identify mismatch between perceived and objective performance reading
  • 25. 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
  • 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
  • 41. STARK CONTRAST TO COMMON RECOMMENDATIONS
  • 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

Editor's Notes

  • #15: Beymer Bernard Darroch Banerjee Bhatia
  • #30: R1: participants might have needed "much more fixations to read the whole text"