Download Color & Typography for the

Color & Typography
for the Web
Information Architecture & Design I
Yi-Hsuen Shih
October 25, 2005
Overview
o Importance of color &
typography in IA
o Color: systems, screen display,
browser, HTML, theory,
symbolism
o Typography: definition, history,
type, 3 aspects
o How does Google do it?
o Resources
Importance of color & typography in IA
o Build hierarchy, structure,
organization
o Create context
o Enhance content
o Draw attention
o Provoke emotions
o Convey meaning
o Visual communication
o Aid to metaphor, navigation,
label, logo, graphics...
Color Systems
o Print:
oCMYK: cyan, magenta,
yellow and black
oSubtractive or Reflective
colors
o Screen display:
oRBG: red, blue, green
oAdditive colors
http://dx.sheridan.com/advisor/cmyk_color.html
Web color: screen display
o Pixel (picture element):
x & y coordinates
o Color depth (resolution):
o1-bit  2 colors (black & white)
o8-bit  256 colors
o16-bit  thousands of colors
o24-bit  millions of colors (true
color)
Web color: browser
o Dithering: illusion of missing colors
o Diminish harsh transition, sharpness
o Web (Browser)-safe color:
o Based on 8-bit color screen display: 216 cross
platform color palette
o “Reallysafe” colors: only 22 colors 
o Strategy:
oIdentify your audience’s technologies
oUse Reallysafe palette
oUse transparent backgrounds
oUse flash
Web color: HTML
o Color value: Hexadecimal
notation
o Color name: Black, coral…
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Color theory
o Color attributes
o Hue: colors
o Saturation: intensity
o Brightness:
darkness/ lightness
o Color harmonies
o Warm: active
o Cool: calming effect
http://joehallock.com/edu/COM498/index.html
o Analog: similar hues
o Complementary: opposite colors
o Triads: 3 colors in triangle
o Tool: Mundi Design
Color Symbolism
o Use color to convey meaning:
oBlack: power, stylish, timeless
oWhite: purity, neutral, summer
oRed: action, confidence,
courage, vitality, love, intensity
oGreen: life, nature, fertility,
calming
oBlue: Loyalty, truth, peace,
depressing
http://www.creativesourcesf.com/
http://www.toydrum.com/
http://www.rockcorps.org/
http://www.jrgeoffrion.com/
What is Typography?
o Dictionary.com: The art and technique of
printing with movable type.
o 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.
o 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.
http://www.rsub.com/typographic/
http://www.rsub.com/typographic/
http://www.juxtinteractive.com/
http://www.thetruth.com/index.cfm?seek=truth
History of web typography
o Macintosh: Graphical User
Interface (GUI),
bitmapped city-named fonts
o Adobe: Postscript
o Apple + Microsoft: Truetype
o HTML: problem with heading tag
o CSS: provide control over exact
visual style
Type
o Serif: stroke at the ends of a letter
o Sans Serif: without serifs
o Leading: vertical space between
baselines
o Kerning: horizontal space
between letters
Typefaces
http://www.typenow.net/
Typography for the web
o Legibility: good typography depends on visual
contrast between fonts, text blocks, headlines, space
o Alignment: margins unity; white space visual relief
o Line length: columns, invisible tables
o Typefaces: Georgia & Verdana for screen
o Case: upper + lower
o Emphasis: italics, bold…
o Consistency: create harmonic structure, predictable
o Accessibility:
o Size: use relative units, offer text-only version
o Color: contrast
Google’s logo
o Typography v.s. logo
o Color v.s. logo
o Resources
http://www.google.com/doodle8.html
http://www.google.com/holidaylogos.html
http://www.google.com/talk/
http://labs.google.com/
http://mail.google.com/mail/help/about.html
Conclusion
User, Context, Content
o Difference in culture, age, gender
o Accessibility
o Theme / topic
o Don’t overwhelm
o Harmony
o Use CSS
o Don’t underline text, only links
Resources
o Art and the Zen of web sites
http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htm
o Colors on the web: color theory and color matching
http://www.webwhirlers.com/colors/introduction.asp
o Color Space Fundamentals
http://dx.sheridan.com/advisor/cmyk_color.html
o Dictionary.com http://dictionary.reference.com/
o Globalization of the user interface design for the web
http://www.ischool.utexas.edu/~i385e/readings/Marcusglobalization.htm
o Information Architecture for the World Wide Web, Rosenfeld & Morville
o Mundi Design http://www.mundidesign.com/webct/webct.html
o The meanings of color: http://www.crystal-cure.com/colormeanings.html
o W3 schools http://www.w3schools.com
o Web Style Guide http://www.webstyleguide.com/type/index.html
o Web color reference
http://www.webreference.com/html/reference/color/
o Web monkeys
http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design
o Wikipedia http://en.wikipedia.org/wiki/Main_Page