Prioritizing Web UsabilityNielsen and Loranger

Chapter 7: Typography: Readability and Legibility

Paul Ammann

http://cs.gmu.edu/~pammann/

SWE 432

Design and Implementation of Software for the Web

04/20/23 2

Overview• Body Text: The Ten Point Rule

• Relative Specifications

• Choosing Fonts

• Mixing Fonts and Colors

• Text Images

• Moving Text

Web Pages != Printed Pages

04/20/23 3

Readability and Legibility• Good Visual Design

– vs.

• Branding, Personal Preferences, Aesthetics, or Ego• Problems

– Text Too Small of Fuzzy

– Text Not Easily Resizable

– Text Color Provides Inadequate Contrast With Background

• Text Overshadowed By Surrounding Design Elements• Examples:

– Pixar (Note small white text)

– Dianon Corporation (2003) Note Poor Display of PDF

Usability vs. Other Drivers

04/20/23 4

Body Text: The Ten Point Rule• Recommended Text Sizes

– 10 to 12 for General Audiences, Teenagers, Young Adults

– 12 to 14 for Senior Citizens or Young Children

• When Faced With Space Issues– Try to Cut the Text or Move to HyperLink

• Plan for Differences in Hardware– Designers Often Use High End Equipment

– Users Often Use Old, Outdated Equipment

Less Text Is Generally Better

04/20/23 5

Relative Specifications• Recommend Relative Font Sizes

– Example: Headline at 140% of Body Text vs. 14 Pt Font

– Reason: • If User Enlarges Text, Everything Expands

• If Designers Use Absolute Sizes, User is Stuck

• Providing for Resize– Good Example:Wired (Note The 4 A’s)

– Note (Updated) Instructions: Social Security Administration

– Newer Browsers Offer Better Control• Currently Still Desirable To Provide Additional Control

Make It Look Right In Multiple Environments

04/20/23 6

Choosing Fonts• All Fonts Are Not Created Equal• Serif vs. Sans-Serif

– Difference Is Cross Lines At Tips of Letters

– In Print: Serif is 10% Faster to Read

– On a Screen: Results Are Exactly the Opposite!

– By 2025, Screen Resolution Should Catch Up!

• Small Set of Fonts Standard on Most Browers– Arial, Arial Black, Comic Sans MS, Courier New,

Georgia, Impact, Times New Roman, Trebuchet MS, Verdana

• When In Doubt, Use Verdana– Georgia is Best Serif Font for Online Reading

Fonts Matter!

04/20/23 7

Mixing Fonts and Colors• Limit Number of Fonts

– Use Variations for Emphasis

– Same Rules Apply to Color

– Recommend < 3 Fonts, < 4 Colors

• Don’t SHOUT at users!– Bad Example: Cendant

– All Caps is About 10% Slower Than Mixed Case

• Text and Background Contrast– Black Text on White Is Easiest To Read (Note These Slides!)

– Avoid Similar Colors: Gary Daugherty

– Avoid Busy Backgrounds

Users Struggle Or Ignore When Overloaded

04/20/23 8

Text Images• Appropriate For Snippets Such As Buttons

– Not For Large Blocks

• Reasons– Graphics Text Causes File Bloat

• Yes, We Still Care

– Graphics Text Not Searchable• No Spider Will Ever Find Your Text

– Graphics Text Not Selectable• How Annoying Is This?

– Graphics Text Doesn’t Scale Well

– Screen Readers Can’t Read Graphics Text

• Moving Text: Don’t Do It!

Stick With Normal Text