Readability and Legibility Upsorn Praphamontripong CS 4501-006 Design and Implementation of Software for the Web Fall 2016

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 4501-006

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 4501-006

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 4501-006

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 4501-006

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 4501-006

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 http://www.fairfaxcounty.gov/living/ (resizing options) http://records.ureg.virginia.edu/content.php?catoid=11&navoid=190 https://rabi.phys.virginia.edu/mySIS/CS2/search.php Let users control their environment CS 4501-006

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 4501-006

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 4501-006

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 4501-006

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 4501-006

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 4501-006