Color & Typography for the Web
description
Transcript of Color & Typography for the Web
![Page 1: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/1.jpg)
Color & Typography for the Web
Information Architecture & Design IYi-Hsuen ShihOctober 25, 2005
![Page 2: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/2.jpg)
Overviewo Importance of color &
typography in IAo Color: systems, screen
display, browser, HTML, theory, symbolism
o Typography: definition, history, type, 3 aspects
o How does Google do it?o Resources
![Page 3: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/3.jpg)
Importance of color & typography in IAo Build hierarchy, structure,
organization o Create contexto Enhance contento Draw attentiono Provoke emotionso Convey meaningo Visual communicationo Aid to metaphor, navigation,
label, logo, graphics...
![Page 4: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/4.jpg)
Color Systemso Print:
oCMYK: cyan, magenta, yellow and black
oSubtractive or Reflective colors
o Screen display:oRBG: red, blue, greenoAdditive colors
http://dx.sheridan.com/advisor/cmyk_color.html
![Page 5: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/5.jpg)
Web color: screen displayo Pixel (picture element):
x & y coordinateso Color depth (resolution):
o1-bit 2 colors (black & white)
o8-bit 256 colorso16-bit thousands of colors
o24-bit millions of colors (true color)
![Page 6: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/6.jpg)
Web color: browsero 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 paletteo “Reallysafe” colors: only 22 colors o Strategy:
o Identify your audience’s technologiesoUse Reallysafe paletteoUse transparent backgroundsoUse flash
![Page 7: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/7.jpg)
Web color: HTMLo Color value: Hexadecimal
notationo Color name: Black, coral…
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
![Page 8: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/8.jpg)
Color theoryo Color attributes
o Hue: colorso Saturation: intensityo Brightness:
darkness/ lightness
o Color harmonieso Warm: activeo Cool: calming effecto Analog: similar hueso Complementary: opposite colorso Triads: 3 colors in triangleo Tool: Mundi Design
http://joehallock.com/edu/COM498/index.html
![Page 9: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/9.jpg)
Color Symbolismo Use color to convey meaning:
oBlack: power, stylish, timelessoWhite: purity, neutral, summeroRed: action, confidence, courage, vitality, love, intensity
oGreen: life, nature, fertility, calming
oBlue: Loyalty, truth, peace, depressing
![Page 10: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/10.jpg)
http://www.creativesourcesf.com/
![Page 11: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/11.jpg)
http://www.toydrum.com/
![Page 12: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/12.jpg)
http://www.rockcorps.org/
![Page 13: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/13.jpg)
http://www.jrgeoffrion.com/
![Page 14: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/14.jpg)
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.
![Page 15: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/15.jpg)
http://www.rsub.com/typographic/
![Page 16: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/16.jpg)
http://www.rsub.com/typographic/
![Page 17: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/17.jpg)
http://www.juxtinteractive.com/
![Page 18: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/18.jpg)
http
://ww
w.th
etru
th.co
m/in
dex.cfm
?seek
=tru
th
![Page 19: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/19.jpg)
History of web typographyo Macintosh: Graphical User
Interface (GUI), bitmapped city-named fonts
o Adobe: Postscripto Apple + Microsoft: Truetypeo HTML: problem with
heading tago CSS: provide control over
exact visual style
![Page 20: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/20.jpg)
Type
o Serif: stroke at the ends of a letter
o Sans Serif: without serifso Leading: vertical space
between baselineso Kerning: horizontal space
between letters
![Page 21: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/21.jpg)
Typefaces
http://www.typenow.net/
![Page 22: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/22.jpg)
Typography for the webo Legibility: good typography depends on
visual contrast between fonts, text blocks, headlines, spaceo Alignment: margins unity; white space
visual reliefo Line length: columns, invisible tables o Typefaces: Georgia & Verdana for screeno Case: upper + lowero Emphasis: italics, bold…
o Consistency: create harmonic structure, predictable
o Accessibility: o Size: use relative units, offer text-only versiono Color: contrast
![Page 23: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/23.jpg)
Google’s logoo Typography v.s. logoo Color v.s. logoo Resources
http://www.google.com/doodle8.html http://www.google.com/holidaylogos.htmlhttp://www.google.com/talk/http://labs.google.com/http://mail.google.com/mail/help/about.html
![Page 24: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/24.jpg)
![Page 25: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/25.jpg)
![Page 26: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/26.jpg)
![Page 27: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/27.jpg)
![Page 28: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/28.jpg)
ConclusionUser, Context, Content
o Difference in culture, age, gender
o Accessibility o Theme / topico Don’t overwhelmo Harmonyo Use CSSo Don’t underline text, only links
![Page 29: Color & Typography for the Web](https://reader035.fdocuments.net/reader035/viewer/2022062801/56814347550346895dafbeea/html5/thumbnails/29.jpg)
Resourceso Art and the Zen of web sites
http://www.ischool.utexas.edu/~i385e/readings/art_and_zen.htmo Colors on the web: color theory and color matching
http://www.webwhirlers.com/colors/introduction.aspo Color Space Fundamentals
http://dx.sheridan.com/advisor/cmyk_color.htmlo Dictionary.com http://dictionary.reference.com/o Globalization of the user interface design for the web
http://www.ischool.utexas.edu/~i385e/readings/Marcus-globalization.htm
o Information Architecture for the World Wide Web, Rosenfeld & Morville
o Mundi Design http://www.mundidesign.com/webct/webct.htmlo The meanings of color: http://www.crystal-cure.com/color-
meanings.htmlo W3 schools http://www.w3schools.com o Web Style Guide http://www.webstyleguide.com/type/index.htmlo 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