Web Directions North » Blog Archive » Five Essential Composition Tools for Web Typography with Kimberly Elam

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