Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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