Download 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
 Red - #FF0000
 Blue - #0000FF
White - #FFFFFF
Green - #00FF00
 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: sansserif 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