The Art, Technology, and Science of Reading Kevin Larson, Microsoft.

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 [email protected]://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.