Web Directions North 2008

An excellent introduction to typography on the web. Elam presented many visual examples of good and bad typography on the web. She also pointed to a number of graphic design principles that can transfer to the web.

• The typographic pledge:
  • “I will not squish or stretch type.”
  • “I will not outline type.” – each character becomes multiple strokes and becomes harder to interpret visually.
  • “I will not stack type.” – ascenders and descenders crash into each other; makes it very difficult to read. Look to spines on books for the proper way to add text to a tight vertical area.
  • “I will use prime marks and quotation marks appropriately.”
  • “I will appropriately use hyphens, en dashes, and em dashes.”
  • “I will honor the classic families of type.” – to develop an appreciation of types and familiarity of types.
  • “I pledge not to commit crimes against typography.”

• “We all know what bad typography looks like”:
  • Example: Longscycle.com (found via webpagesthatsuck.com)
  • Too much happening on the page.
  • Logo repeated multiple times throughout the page.
  • Tons of logos from all their suppliers crowded together – provides no value to the user.

• Bad typography:
  • Disorganized
  • Unstructured
  • Unreadable
  • Unclear

• Good typography:
  • Organized
  • Structured
  • Readable
  • Clear

• Steps to good typography:
  • Content organization
  • Visual structure:
    • Grids are important to provide a visual hierarchy to information.
  • Nonobjective Elements:
    • Geometric elements such as rules, lines, boxes, circles, rectangles, squares.
    • Provide reinforcement to the structure of the page when used properly.
    • “Circles are like visual electromagnets.” Vision is strongly drawn to circles e.g. bullets.
  • Tone:
    • Text color.
    • Text weight.
    • Can change the meaning of text to a reader, or even how the text is read/interpreted.

• Good typographic practice:
  • Line length: 8 to 11 words per line.
  • Background color & texture – solid color makes text easier to read. Textured backgrounds often reduce readability.
  • Use upper and lower case properly – all upper case screams at the reader.
  • Color deficit – approximately 8% of males have a color deficit disorder.
  • Background & text color – best contrast is dark text on light background.
  • Picture superiority effect – a picture is worth a thousand words, but show restraint in the number and type of images used. Coupling text with images works well.
• Overall: make typography and design purposeful.

Posted by Jeff on 30/01/08 at 12:45 pm