Design and Implementation of Software for the Web 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 This lecture is drawn from 632, Intro/Admin, Ch 1/Overview and Ch2/Theory.

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

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

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

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

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

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

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

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

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

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

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