Color and Typography for the Web
Download
Report
Transcript 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