Transcript Color & Typography for the Web

Color & Typography for
the Web
By Brittany Anne Robertson
16 October 2007
Why are color & typography
important to IA?


Both serve as
visual and verbal
communication of a
site.
F-shaped pattern
for reading web
content
What is typography?

The study, design, and usage of fonts
and typefaces.
Arial!
Times New
Roman!
Garamond!
Tahoma!
Georgia!
Verdana!
!
What is color?
The way our brain interprets the
electromagnetic radiation of a
wavelength
 Different wavelengths are seen as
different colors

Typography for the Web

Web page type vs. Print type
o
o


Web = 85 dpi or less
Print = 1200 dpi or more
Less useable area on a computer
screen than on a page
Page is rebuilt each time it is loaded
Good Typography . . .

Establishes a visual hierarchy . . . by
providing visual punctuation and
graphic accents that help readers
understand relations between prose
and pictures, headlines, and
subordinate blocks of text
How to Make Good
Typography

Typefaces
o Serif vs. Sans Serif
 Serif

= More legible on paper
Sans serif = More legible on screen
– x-height; size of typeface
o Adaptable typeface = Times New Roman
o Some designed for screen: Verdana, Georgia
etc.

Great on screen, clunky on paper
o Convention: serif for text, sans serif for headlines
More How to Make Good
Typography
o
Type size, 12pt or >
o 3 ways: “em” unit, point size, pixel units
o
o
Different screens display points differently
User settings may interfere
o
Case: downstyle
o
Emphasis: italics, bold, underlined,
colored text, CAPITAL LETTERS
Last of How to Make Good
Typography


Space & Indentation
Alignment
o Left-justified – main text and headlines


Line length
White Space
o Leading = 2+point size of type
o Paragraphs


To indent:   or transparent
single-pixel .GIF
Line space: <br />+.GIF or <p>
Color
RGB
Primary Colors
CMYK
Secondary Colors
Tertiary Colors
Value
Hue
Color Wheel
Tint & Shade
Saturation
Using Colors on the Web

Each color = group of 3 dots (R+G+B)
o Possible value of each dot from 0 to 255
o 256 x 256 x 256 = 16,777,216 colors!

Hexadecimal system; base of 16
o Value of each dot = two digits


Ex: FF+FF+00 =
Websafe colors – dated
o Mathematically calculated: combo of 0%,20%,
40%, 60%, 80% and 100% of primary colors
o < 1% users have 256 color screens
Using Colors on Your Page
Analog Colors

Harmonious
Rule o’ Thumb: Use 3 Colors
o Primary color: sets tone of design
o Secondary color: “back up” primary color
Complementary o Highlight color: emphasis
Highlight
Triad
Colorful & Balanced
Split Complementary
Contrast & Harmony
More Using Colors on Your Page
Contrast
Value Contrast
Hue Contrast
Simultaneous Contrast
Saturation Contrast
Colors & Text
Tools You Can Use

Color Help
o http://cssjuice.com/25-popular-color-scheme-andpalette-generators/

http://cssjuice.com/
o http://www.colorblender.com/

Color & Text
o http://www.ideo.com/visualizer.html
o http://typetester.maratz.com/

Color Accessibility
o http://wellstyled.com/tools/colorscheme2/index-en.html
What Did We Learn?
Hopefully, what not to do
Resources

Web Style Guide, 2nd edition
– http://www.webstyleguide.com/type/index.html

Colors on the Web
– http://www.colorsontheweb.com/default.asp

Design: Talkboard glossary
– http://www.designtalkboard.com/glossary/

Bad Typography Page
– http://www.jaydax.co.uk/tutorials/webdesign/badpageguide/badpgguide.html

F-shaped Pattern for Reading Web Content
– http://www.useit.com/alertbox/reading_pattern.html

Fred Frap’s Page
– http://www.fredfrap.com/Booking%20information.htm

Usability.gov
– http://www.usability.gov/pdfs/guidelines.html

Pink and Orange Sunburst Picture
– http://www.hgu.mrc.ac.uk/Bad/sometext.gif