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/.