1. Readability and Legibility
Upsorn Praphamontripong CS
Design and Implementation of Software for the Web
Fall 2016

2. Chapter 7: Outline Body text: The ten point rule
Relative specifications
Choosing Fonts
Mixing fonts and colors
Text images
Moving text
Fonts, color, and size give users the first impression about who you are
Web pages ≠ Print pages CS

3. Five Common Problems Text is too small Tex appears fuzzy
Text cannot be resized
Not enough contrast or too much contrast
Design elements overshadow text
These happen when designers get “cute” or “cool”
They focus on form, not function
Some badly designed sites are beautiful ! CS

4. Readability and Legibility
Do not make typographic decisions based on
Branding
Personal preferences
Aesthetics
Ego
Focus on “users”
Ensure accessibility – how do you support people with vision problem
If users have trouble reading,
they won’t read it. CS

5. Five Top Guidelines for Type
Use common fonts
At least 10 point size
Avoid busy backgrounds
Use dark (black) text on light (white) backgrounds
Not light on dark
Keep distractions to a minimum :
Moving
All-caps
Graphical text
KISS : Keep It Simple & Stupid CS

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 CS

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?
Check out (resizing options)
Let users control their environment CS

8. Choosing Fonts Don’t get too fancy All fonts are not created equal
Typefaces reflect the tone of your site
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 CS

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
It is easy to overload users
Varying fonts and attributes can help people differentiate between the relative importance of headings and information.
But when everything is highlighted, nothing is emphasized. CS

10. 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 !
File bloat - remember half of the world is still using dial-up connections and has low patience for sites that load slowly
People with vision problems may use screen readers to help them read the site – screen readers can’t read text images
Help users acquire information CS

11. Moving Text Let’s move !!! Let’s blink !!!
Blinking or moving text distracts users
People want to control their reading pace
Dynamic text takes that control away
People with impaired vision may not be able to focus on and maintain continuous eye contact with constantly moving items
Let’s move !!!
Let’s blink !!! CS

12. 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 CS