Color and Typography for the Web

Color and Typography for the Web Kathryn Pierce INF 385E 10.19.06

Overview • Functions of Color and Typography • Color Models • Hexidecimal system • Color technical standards • Typography concerns • Typeface Issues • HTML and CSS • Graphic Text • 10 Steps to Professional Type • Remember the User

Color and Typography • Provide structure to site • Allow for scanning rather than reading • Used to bring viewers eye to important elements • Add to user experience

Color in Print & on the Web • Print: CMYK • Cyan, Magenta, Yellow, Black • Subtractive: • Cyan+Magenta+Yellow=Black • Works through light absorption • Web: RBG • Red, Blue, Green • Additive: • Red+Blue+Green=White

Hexidecimal System • HTML and CSS • Six digit number, 3 bytes - RRGGBB • Byte 1 - Red • Byte 2 - Green • Byte 3 - Blue • Black - #000000 White - #FFFFFF • Red - #FF0000 Green - #00FF00 • Blue - #0000FF • Every color is made up of a different value for red, green, and blue components-ranging from 0 to 255.

Color • 8-bit color: 256 colors • "Web-safe color" • Based on 8-bit color graphics • Most modern computers now capable of: • 16-bit: over 60,000 colors • 24-bit: over 16 million (true color)

Typography Concerns • Readability-ease of cognition • Legibility-ease of deciphering letters and words • Customization-accessibility of text for users

Typefaces • Serif vs. Sans-serif: sans-serif generally more clear on the computer screen because of coarse screen resolution • Examples of great web typefaces: • Arial • Verdana

HTML & CSS • HTML: Uses font tags to define text attributes • Bold • Italic • Font size • Color • CSS: Requires less code Increases consistency Changes are easier Saves time

Graphic Text • Pros: Good for decorative text • More design options • Good for headlines • Cons: • Longer display time • Harder to edit • User cannot customize

10 Steps to Professional Web Type • Use one or two • Use left-justified type • Give text space (white space) • Avoid bold type for paragraph text • Avoid all capital text

10 Steps to Professional Web Type • Use headlines to chunk text • Use columns • Avoid overly large text • Only underline links • Use graphic text correctly • Peck, Great Web Typography

Remembering the User • Computer systems are going to vary from user to user • Individuals have different visual issues, like color blindness or aging eyes - their perception of your site will differ from many users • Color and typography should reflect the purpose of your site. • Colors and text provoke emotional responses.

References • Bringhurst, R. (1992). Elements of Typographic Style. Vancouver: Hartley & Marks. • Carlson, J., Malina, T. & Fleishman, G. (1999). Typography: the best work from the web. Gloucester, MA: Rockport. • The Elements of Typographic Style Applied to the Web. Rutter, R. A practical guide to web typography. http://www.webtypography.net/ • Karp, T. Art and the Zen of web sites. Retrieved from http://www.ischool.utexas.edu/~i385e/schedule.html • Peck, W. (2003). Great Web Typography. New York: Wiley. • Pring, R. (2000). www.colour: effective use of colour for web page design. London:Cassell & Co. • Smart, K.L., Rice, J.C., Wood, L.E. (2000). Meeting the needs of users: toward a semiotics of the web. In Technology & Teamwork. • Web-colors-explained.com. http://www.web-colors-explained.com/ • Wikipedia. Typography. http://en.wikipedia.org/wiki/Typography • Wikipedia. Web colors. http://en.wikipedia.org/wiki/Web_colors

Color and Typography for the Web