color typography for the web l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Color & Typography for the Web PowerPoint Presentation
Download Presentation
Color & Typography for the Web

Loading in 2 Seconds...

play fullscreen
1 / 16

Color & Typography for the Web - PowerPoint PPT Presentation


  • 261 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Color & Typography for the Web' - emily


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
color typography for the web

Color & Typography for the Web

Rachael Gilg

INF 385E: Information Architecture & Design

October 12, 2004

why are color typography important in ia
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
how web color works
How Web color works
  • RGB vs. CMYK
    • Web vs. print
    • Additive vs. subtractive
  • Representing colors on the Web
    • Hexidecimal system (RRGGBB)
    • Named colors
    • RGB values / percentages

RGB

CMYK

Equivalent color units (CSS)

red

#f00

#ff0000

rgb(255,0,0)

rgb(100%, 0%, 0%)

technical mediating factors or fear of the dreaded 216
Technical mediating factorsor, 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

human mediating factors
Human mediating factors
  • Visual perception
    • Color sensitivity
    • Visual color deficiency (“Color Blindness”)
    • Eye fatigue
  • Emotions / mood
  • Cultural background
  • Aesthetics
dimensions of color
Dimensions of Color
  • Hue = shade
  • Saturation = purity
  • Luminance = brightness
  • Relativity!!
designing with color
Designing with color
  • Use contrast for structure & hierarchy
  • Color palettes
    • Monochromatic
    • Complementary
    • Analogous
  • Customization with CSS
color palette examples
Color Palette Examples

Monochromatic - http://www.pbs.org/wgbh/amex/foster/

Complementary

http://www.pbs.org/empires/romans/

Analogous - http://www.pbs.org/animateddogs/

ii typography
II. Typography
  • “Typography exists to honor content.” - Robert Bringhurst
    • Verbal & visual
    • Creates hierarchy to understand relationships
  • Web typography considerations
    • Legibility
    • Readability
    • Accessibility / Customization
evolution of digital typography
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
font styles on the web
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
  • Match style to content
formatting
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!
sources
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/.