Post on 31-Mar-2015
The Art, Technology, and Science of Reading
Kevin Larson, Microsoft
ClearType
ClearType subpixel spacing in IE9
Neu-Vita Oculizer
Photos by American Artifacts’ Richard Van Vleck
Illustration by Patrick Lynch
Illustration by Patrick Lynch
Mild Medium Heavy Strong6
7
8
9
10
11
Orbicularis Oculi ActivationNahar, Sheedy, Hayes, & Tai (2006)
Glare
Refractive Error
Contrast
Size
Units different for each condition
EMG
Pow
er (d
b/H
z)
Mild Medium Heavy Strong5
10
15
20
25
Blink RateNahar, Sheedy, Hayes, & Tai (2006)
Refractive Error
Glare
Contrast
Size
Units different for each condition
Blin
ks p
er m
inut
e
Three Kinds of Eye Fatigue
• Internal eye disorders – Accommodation or Convergence problems
• Strain that can be improved by squinting– Glare or Refractive problems
• Non-optimal text– Text size too small or Contrast too low
Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteres are at the rghit pclae. The rset can be a tatol mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by it slef but the wrod as a wlohe.
Rayner, White, Johnson, & Liversedge (2006)
Example Sentence
NormalThe boy could not solve the problem so he asked for help.
Internal letters
The boy cuold not slove the probelm so he aksed for help.
Final letters
The boy coudl not solev the problme so he askde for help.
Beginning letters
The boy oculd not oslve the rpoblem so he saked for help.
Rayner, White, Johnson, & Liversedge (2006)
Example SentenceReading Speed
NormalThe boy could not solve the problem so he asked for help.
255 wpm
Internal letters
The boy cuold not slove the probelm so he aksed for help.
227 wpm
Final letters
The boy coudl not solev the problme so he askde for help.
189 wpm
Beginning letters
The boy oculd not oslve the rpoblem so he saked for help.
163 wpm
a a
Letter Font Area Adjusted
a Verdana 1.901
a Consolas 1.854
a Frutiger 1.815
a Centaur 1.792
a Rockwell 1.791
a Baskerville 1.747
a Helvetica 1.734
a Georgia 1.694
a Garamond 1.657
a DIN 1.289
a Futura 1.252
a Bodoni 1.098
Tai & Sheedy (unpublished)
s s
Letter Font Area Adjusted
s Centaur 2.309
s Futura 2.173
s Baskerville 2.139
s Verdana 2.081
s Consolas 2.062
s Frutiger 2.015
s DIN 1.904
s Bodoni 1.848
s Georgia 1.759
s Garamond 1.753
s Helvetica 1.744
s Rockwell 1.605
Tai & Sheedy (unpublished)
Gabriola
Stroop (1935)
redpurplegreenyellowblue
Say the color of the ‘ink’
redpurplegreenyellowblue
redpurplegreenyellowblue
Say the word
Dawn Shaikh (2008)
Corsiva Times
pretty reliablegorgeous
staid
stylish constant
Hazlett & Larson (unpublished)
Say the word
prettyreliable
stylish
staid
Verdana Georgia
youthful maturecasual formalpassive assertive
Say the word
casual
mature
youthful
formal
Larson, Hazlett, Chaparro, & Picard (2006)
People perform better on cognitive tests after reading with good typography
People frown less with good typography
(less corrugator muscle activity)
People frown less with good typography
(less corrugator muscle activity)
Take Aways
ClearType subpixel spacing improves readabilityStandards based web pages in IE9 will get this!
Reduce eye fatigue with larger, higher contrast textDo use 12 point, black-on-white text.Don’t use 9 point, grey on grey text.
Choose font personalities that match your contentDo use serif fonts to convey formality and maturityComic sans is only appropriate for cartoonish materials
There are cognitive benefits for good page layout.A well designed page is more likely to be impactful and cause the reader to act on the message.
Contact Info
Kevin Larsonkevlar@microsoft.comhttp://blogs.msdn.com/fontblog/
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.