1. Design and Implementation of Software for the Web
Prioritizing Web Usability Nielsen & Loranger : Chapter 7 Typography Readability and Legibility
Jeff Offutt
SWE 432
Design and Implementation of Software for the Web
This lecture is drawn from 632, Intro/Admin, Ch 1/Overview and Ch2/Theory.

2. Users on the Web need to read and understand
First Impressions
Users on the Web need to read and understand
Fonts, color, and size give users the first impression about who you are
15 November 2018
© Offutt

3. Overview / Chapter 7 Outline
Body Text: The Ten Point Rule
Relative Specifications
Choosing Fonts
Mixing Fonts and Colors
Text Images
Moving Tex
Web Pages ≠ Print Pages
15 November 2018
© Offutt

4. Five Common Problems 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 !
15 November 2018
© Offutt

5. 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
15 November 2018
© Offutt

6. Five Top Guidelines for Type
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
15 November 2018
© Offutt

7. 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
15 November 2018
© Offutt

8. 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
15 November 2018
© Offutt

9. 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
15 November 2018
© Offutt

10. 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
15 November 2018
© Offutt

11. Help users acquire information
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
15 November 2018
© Offutt

12. Typography is a very important first impression
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
15 November 2018
© Offutt