Type and Color
for WWW
 
type
Type on the web
  • Basically treated the same as printed text
  • printed text is typically 1200 dpi
  • web text is typically 85 dpi (much lower resolution)
  • web page screen much smaller than a printed page
  • unexpected:
    • missing font on user's machine
    • out-of-date web browser
    • specific user font settings
    • OS (Windows & Mac display fonts differently)
  • legibility is determined by
    • contrast
    • alignment
    • whitespace
    • typeface
    • type size
    • case
    • emphasis
typeface
3 Basic Types of Typefaces
  • Serif
  • Sans Serif
  • Decorative

(ex: Times Roman)  (ex: Helvetica)

 

Useful fonts supplied by Windows & Macintosh

Georgia and Verdana were created for the computer screen

Times was created for printed text

 

COlor
Display of color depends on the following
  • Monitors - How the monitor displays color
  • Browsers - Browsers have built-in resources for rendering color when running
  • HTML - Tags are used when not part of a graphic to indicate color (text, bkgd)

 

Monitor Resolution - Number of Pixels displayed on the screen
        640 X 480
        800 X 600
        1024 X 768
        1280 X 1024
                       etc....

Most web elements are measured in terms of pixels, not inches 
       creates a proportional relationship between elements

...the larger the number of pixels per inch the smaller the images etc appear in the web page.

image resolution should be 72ppi to keep file smaller.

 

Bit Depth - number of bits used to represent the color in one pixel. (more bits, more colors, more RAM)
        ex: 8-bit, 16-bit, 24-bit

 

RGB color 

for web pages - Don't use CMYK(Cyan, Magenta, Yellow, blacK) or other color used for printed items

Monitors display color by combining red, green, blue light

 

8 bit color - uses 8 bits per pixel to indicate color


           

 

 

24 bit system (true color) - uses 24 bits per pixel
        256 x 256 x 256 different colors

 

Palettes

  • 24 bit monitors are true color
  • 16 bit monitors approximate true colors (65,536 colors)
  • 8 bit monitors use a color palette of 256 different colors
  • browsers use a web palette for 8-bit monitors (216 web-safe colors)

 

Browser Safe palette (Web Palette)

  • Set of 216 colors that would display identically on all monitors (regardless of browser, OS, monitor)
  • Uses the 8-bit monitor set of colors
  • Now most all monitors display thousands or millions of colors and it is no longer necessary to restrict the color palette
  • if colors are not available on a computer then the color is mapped and some "dithering" will occur - image will not blend
  • What to do?  Create all graphics for an 8-bit monitor using browser safe palette