Color & Typography for the Web
Rachael Gilg
INF 385E: Information Architecture & Design
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
RGB

Representing colors on the Web
– Hexidecimal system (RRGGBB)
– Named colors
– RGB values / percentages
Equivalent color units (CSS)
red
#f00
#ff0000
rgb(255,0,0)
rgb(100%, 0%, 0%)
Rachael Gilg | INF 385E | October 12, 2004
CMYK
Technical mediating factors
or, 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/
Complementary
http://www.pbs.org/empires/romans/
Analogous - http://www.pbs.org/animateddogs/
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
Rachael
Match
style to content
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 Consortium
http://www.w3c.org
Rachael Gilg | INF 385E | October 12, 2004
Example: The Atlantic
http://www.theatlantic.com
Rachael Gilg | INF 385E | October 12, 2004
Example: Buglight
http://www.donbarnett.com
Rachael Gilg | INF 385E | October 12, 2004
Sources
Bringhurst, 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/.
Rachael Gilg | INF 385E | October 12, 2004