Chapter 5: TYPOGRAPHY

Intro to Typography

History
- Web designed for particle physicists
- Html typography not suited to graphic design
Cascading style sheets (CSS)
- HTML/Graphic Design Compromise
- Not always the same between browsers
- Advantages of CSS:
  - Separation of content and design
  - Efficient control over large document sets
- How Style Sheets Work
  - let site authors and users determine the size, style, and layout details for each standard HTML tag

Alignment
- Margins
- Justified Text - bad idea
- Centered and right-justified text blocks - difficult to scan
- Left-justified text - Yep, that's the one to use
- Headlines - use left justification
Line length
- acute eye focus is 2-3 inches
- web text lines are generally too long
- 30-40 characters are ideal
- line spacing can allow longer lines without sacrificing legibility
White space
- aka: leading
- too much
  - difficult to locate start of line
- too little
  - ascenders get jumbled between lines
  - lines get confused
- "line-height" in CSS
Suggestion: 12 pt font with 14 to 16 pts of leading
Indenting paragraphs
- typographic: indent first line
- industrial: space between paragraphs
Typefaces
- Intro
  - specify default typefaces
Legibility on screen
- Mostly influenced by cap height and x-height
- Adapted traditional typefaces (Times New Roman)
- Designed for the screen (Georgia and Verdana)
- Choosing typefaces
  - serif for body text (Times New Roman or Georgia)
  - sans serif for headlines (Verdana or Arial)
  - can only truly judge for each individual website
- Specifying typefaces
  - use css
  - list alternative typefaces
Type size
- use em rather than points
- em is more flexible with font resizing
- em = font height
Case
- Capitals are difficult to scan and cause monotonous blocks
Emphasis - use sparingly
- Italics
- Bold
- Underlined - reserve for links
- Colored text - easily confused with links
- Capital letters
- Spacing and indentation