Color & Typography for the Web
Rachael Gilg
INF 385E: Information Architecture & Design
October 12, 2004
Rachael Gilg | INF 385E | October 12, 2004
Why are color & typography important in IA?
Structuring & ordering content– Create hierarchies / order– Aid navigation– Draw attention to page elements
Communicating using visual language Solving problems
Rachael Gilg | INF 385E | October 12, 2004
How Web color works RGB vs. CMYK
– Web vs. print– Additive vs. subtractive
Representing colors on the Web– Hexidecimal system (RRGGBB)– Named colors– RGB values / percentages
red #f00 #ff0000 rgb(255,0,0) rgb(100%, 0%, 0%)
RGB CMYK
Equivalent color units (CSS)
Rachael Gilg | INF 385E | October 12, 2004
Technical mediating factorsor, fear of the “dreaded 216”
Monitors (bit-depth setting)– 8 bit = 256 colors (4% of users)– 16 bit “high color” = 65,000 colors (30%)– 24 bit “true color” = 16.7+ million colors (66%)
Browsers– Dithering– “Web-safe” colors
Platforms / Monitors (color calibration)– Gamma (contrast) settings
• 1.8 for Mac, 2.2 for PC
statistics source: http://www.w3schools.com/browsers/browsers_stats.asp
Rachael Gilg | INF 385E | October 12, 2004
Human mediating factors
Visual perception– Color sensitivity– Visual color deficiency (“Color Blindness”)– Eye fatigue
Emotions / mood Cultural background Aesthetics
Rachael Gilg | INF 385E | October 12, 2004
Dimensions of Color
Hue = shade Saturation = purity Luminance = brightness
Relativity!!
Rachael Gilg | INF 385E | October 12, 2004
Designing with color Use contrast for structure & hierarchy Color palettes
– Monochromatic– Complementary– Analogous
Customization with CSS
Rachael Gilg | INF 385E | October 12, 2004
Color Palette Examples
Monochromatic - http://www.pbs.org/wgbh/amex/foster/
Analogous - http://www.pbs.org/animateddogs/
Complementaryhttp://www.pbs.org/empires/romans/
Rachael Gilg | INF 385E | October 12, 2004
II. Typography
“Typography exists to honor content.” - Robert Bringhurst– Verbal & visual– Creates hierarchy to understand relationships
Web typography considerations– Legibility– Readability– Accessibility / Customization
Rachael Gilg | INF 385E | October 12, 2004
Evolution of digital typography
Graphical User Interfaces HTML
– Separates design from structure– Emphasis on interoperability, not visual style
CSS (Cascading Style Sheets)– separates visual style from document structure– greater typographic control with less code– more formatting options
Rachael Gilg | INF 385E | October 12, 2004
Font styles on the Web Best choice for screen: sans-serif, large size,
exaggerated x-height
Verdana x Times x High contrast with background color Anticipate size variability Avoid ALL CAPS & use “downstyle” headlines Use emphasis sparingly, 1 parameter
– Colored / underlined have special meanings
Specify fonts for each platform Be consistent Match style to content
Rachael Gilg | INF 385E | October 12, 2004
Formatting
Overall pattern of organization & visual contrast– Establish visual pattern using grid system
Alignment– Left-justified with ragged edge is best
Line Length – Columns of text no wider than 365 px.– Anticipate expanding layouts / wrapping
White space is your friend!
Rachael Gilg | INF 385E | October 12, 2004
Example: WWW Consortiumhttp://www.w3c.org
Rachael Gilg | INF 385E | October 12, 2004
Example: The Atlantichttp://www.theatlantic.com
Rachael Gilg | INF 385E | October 12, 2004
Example: Buglight http://www.donbarnett.com
Rachael Gilg | INF 385E | October 12, 2004
SourcesBringhurst, R. (1992). Elements of Typographic Style. Vancouver: Hartley & Marks.
Gorn, G. J., Chattopadhyay, A., Sengupta, J., & Tripathi, S. (May, 2004). Waiting for the Web: how screen color affects time perception. In Journal of Marketing Research, pp. 215-225.
Hall, R. H. & Hanna, P. (May-June, 2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. In Behaviour & Information Technology, 23:3, pp. 183-195.
Lehn, D. & Stern, H. (September 6, 2002). Death of the websafe Color palette? Retrieved October 7, 2004 from the Webmonkey Web site at http://webmonkey.wired.com/webmonkey/00/37/index2a.html?tw=design
Loxley, S. (2004). Type: the secret history of letters. London: I.B. Tauris
Lynch, P. J. (2002). Web style guide: basic principles for creating Web site, 2nd edition. New Haven: Yale University Press. (also online at http://www.webstyleguide.com)
Mahnke, F.H. & Mahnke, R.H. (1987). Color and light in man-made environments. New York: Van Nostrand Reinhold Company.
Paper vs. Pixels Part 2. (September, 2004). Retrieved October 5, 2004 from the Web page design for designers Web site at http://www.wpdfd.com/editorial/wpd0904news.htm#feature2
Pring, R. (2000). WWW.color: effective use of color in web page design. New York: Watson-Guptil Publications.
Wikipedia. Web colors. Retrieved October 6, 2004 from http://en.wikipedia.org/wiki/Web_color .
World Wide Web Consortium. (May, 2003). CSS3 Color Module. Retrieved October 7, 2004 from http://www.w3.org/TR/2003/CR-css3-color-20030514/.