Color & Typography for the Web

1. Color & Typography for the Web Information Architecture & Design I Yi-Hsuen Shih October 25, 2005

2. Overview • Importance of color & typography in IA • Color: systems, screen display, browser, HTML, theory, symbolism • Typography: definition, history, type, 3 aspects • How does Google do it? • Resources

3. Importance of color & typography in IA • Build hierarchy, structure, organization • Create context • Enhance content • Draw attention • Provoke emotions • Convey meaning • Visual communication • Aid to metaphor, navigation, label, logo, graphics...

4. Color Systems • Print: • CMYK: cyan, magenta, yellow and black • Subtractive or Reflective colors • Screen display: • RBG: red, blue, green • Additive colors http://dx.sheridan.com/advisor/cmyk_color.html

5. Web color: screen display • Pixel (picture element):x & y coordinates • Color depth (resolution): • 1-bit  2 colors (black & white) • 8-bit  256 colors • 16-bit  thousands of colors • 24-bit  millions of colors (true color)

6. Web color: browser • Dithering: illusion of missing colors • Diminish harsh transition, sharpness • Web (Browser)-safe color: • Based on 8-bit color screen display: 216 cross platform color palette • “Reallysafe” colors: only 22 colors  • Strategy: • Identify your audience’s technologies • Use Reallysafe palette • Use transparent backgrounds • Use flash

7. Web color: HTML • Color value: Hexadecimal notation • Color name: Black, coral…

8. Color theory • Color attributes • Hue: colors • Saturation: intensity • Brightness: darkness/ lightness • Color harmonies • Warm: active • Cool: calming effect • Analog: similar hues • Complementary: opposite colors • Triads: 3 colors in triangle • Tool: Mundi Design http://joehallock.com/edu/COM498/index.html

9. Color Symbolism • Use color to convey meaning: • Black: power, stylish, timeless • White:purity, neutral, summer • Red: action, confidence, courage, vitality, love, intensity • Green: life, nature, fertility, calming • Blue: Loyalty, truth, peace, depressing

10. http://www.creativesourcesf.com/

11. http://www.toydrum.com/

12. http://www.rockcorps.org/

13. http://www.jrgeoffrion.com/

14. What is Typography? • Dictionary.com: The art and technique of printing with movable type. • Wikipedia: The art and technique of selecting and arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications. These applications can be physical or digital. • Web Style Guide: The balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content.

15. http://www.rsub.com/typographic/

16. http://www.rsub.com/typographic/

17. http://www.juxtinteractive.com/

18. http://www.thetruth.com/index.cfm?seek=truth

19. History of web typography • Macintosh: Graphical User Interface (GUI), bitmapped city-named fonts • Adobe: Postscript • Apple + Microsoft: Truetype • HTML: problem with heading tag • CSS: provide control over exact visual style

20. Type • Serif: stroke at the ends of a letter • Sans Serif: without serifs • Leading: vertical space between baselines • Kerning: horizontal space between letters

21. Typefaces http://www.typenow.net/

22. Typography for the web • Legibility:good typography depends on visual contrast between fonts, text blocks, headlines, space • Alignment: margins unity; white space visual relief • Line length: columns, invisible tables • Typefaces: Georgia & Verdana for screen • Case: upper + lower • Emphasis: italics, bold… • Consistency: create harmonic structure, predictable • Accessibility: • Size: use relative units, offer text-only version • Color: contrast

23. Google’s logo • Typography v.s. logo • Color v.s. logo • Resourceshttp://www.google.com/doodle8.htmlhttp://www.google.com/holidaylogos.html http://www.google.com/talk/ http://labs.google.com/ http://mail.google.com/mail/help/about.html

28. Conclusion User, Context, Content • Difference in culture, age, gender • Accessibility • Theme / topic • Don’t overwhelm • Harmony • Use CSS • Don’t underline text, only links

29. Resources • Art and the Zen of web sites http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htm • Colors on the web: color theory and color matching http://www.webwhirlers.com/colors/introduction.asp • Color Space Fundamentals http://dx.sheridan.com/advisor/cmyk_color.html • Dictionary.com http://dictionary.reference.com/ • Globalization of the user interface design for the web http://www.ischool.utexas.edu/~i385e/readings/Marcus-globalization.htm • Information Architecture for the World Wide Web, Rosenfeld & Morville • Mundi Design http://www.mundidesign.com/webct/webct.html • The meanings of color: http://www.crystal-cure.com/color-meanings.html • W3 schools http://www.w3schools.com • Web Style Guide http://www.webstyleguide.com/type/index.html • Web color reference http://www.webreference.com/html/reference/color/ • Web monkeys http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design • Wikipedia http://en.wikipedia.org/wiki/Main_Page