Prioritizing Web Usability
Nielsen & Loranger : Chapter 7
Typography
Readability and Legibility
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 432
Design and Implementation of
Software for the Web
First Impressions
Users on the Web need to read and
understand
Fonts, color, and size give users the first
impression about who you are
1 July 2016
© Offutt
2
Overview / Chapter 7 Outline
1.
2.
3.
4.
5.
6.
Body Text: The Ten Point Rule
Relative Specifications
Choosing Fonts
Mixing Fonts and Colors
Text Images
Moving Tex
Web Pages ≠ Print Pages
1 July 2016
© Offutt
3
Five Common Problems
1.
2.
3.
4.
5.
Text is too small
Tex appears fuzzy
Text cannot be resized
Not enough contrast
Design elements overshadow text
These happen when designers get cute
They focus on form, not function
Some badly designed sites are beautiful !
1 July 2016
© Offutt
4
Readability and Legibility
• Do not make typographic decisions based on
–
–
–
–
Branding
Personal preferences
Aesthetics
Ego
If users have trouble reading
They won’t read it
1 July 2016
© Offutt
5
Five Top Guidelines for Type
1.
2.
3.
4.
5.
Use common fonts
At least 10 point size
Avoid busy backgrounds
Use dark (black) text on light (white) backgrounds
Keep distractions to a minimum :
– Moving
– All-caps
– Graphical text
KISS : Keep It Simple & Stupid
1 July 2016
© Offutt
6
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
Cramming more text by shrinking the font
size results in less reading
1 July 2016
© Offutt
7
Relative Specifications
• Always use relative sizes (percentages)
– Fixed size text interferes with users’ ability to globally change
font size
• Headlines should be about 140% of body text
• Anything less than 100% will not be read
– Only use it for text you do not want to be read
– Then ask … why is it there?
Let users control their environment
1 July 2016
© Offutt
8
Choosing Fonts
• All fonts are not created equal
• Serif vs. Sans-Serif
–
–
–
–
Serif has cross lines at tips of letters
In Print: Serif is 10% faster to read
On a Screen: Sans-Serif is faster !
By 2025, screen resolution may catch up with paper
• Only a few fonts are safe on all browsers
– 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
Don’t get too fancy
1 July 2016
© Offutt
9
Mixing Fonts and Colors
• Limit number of fonts
– Use variations for emphasis
– Same rules apply to color
– Less than 3 fonts, less than 4 colors
• Don’t SHOUT at users!
– All caps is about 10% slower to read than mixed case
• Text and background contrast
– Black text on white is easiest to read on paper and on-screen
(Exactly opposite when projecting)
– Avoid similar colors: Gary Daugherty San Diego Vision
– Avoid busy backgrounds: gmu.edu
It is easy to overload users
1 July 2016
© Offutt
10
Text Images
• Appropriate for buttons
– Not for large blocks of text
• Why not ?
– Graphics text causes file bloat
– Graphics text cannot be searched
– Graphics text cannot be selected
• Users want to copy your address and add it to a map or address book
– Users cannot change the size of graphics text
– Screen readers can’t read graphics text
• Moving text is really annoying and distracting !
Help users acquire information
1 July 2016
© Offutt
11
Summary
Typography is a very important
first impression
Get it wrong and users may
never see the content
Get it right and users will not
notice
1 July 2016
© Offutt
12