For class discussion...

Sell! Sell!

15 Great Examples of Web Typography (January 2008 version)

The Electrical Handyman

Horse Rentals

studiomotiv

Just for fun...
The periodic table of typefaces

Delving deeper into typography...

The killer app in web marketing is not sight, it is sound, whether heard directly (audio) or mentally (ad copy). It is not the design of your web site that sells. It is the content – the words.

—Bryan & Jeff Eisenberg, Call To Action, Pg 8

 

Fonts.com is a site rich with typographic information and more about fine typography

Companion web site for the book, Thinking with Type

A nice portal of typography-related links from Barbara McNally

Typography is one of the course tags on del.icio.us.

Typography for the web

Companion page in technical skills: Five ways to work with type in web design

The essential elements

  1. Measure: Robert Bringhurst method is type size x 30.
  2. Justification: example of left, center, right, justified.
  3. Leading: example of "14 on 14" compared to "14 on 18".
  4. Pull-quotes, call-outs, and handing quotes.
  5. Rhythm
  6. Headings: override defaults for better proximity.
  7. Widows
  8. Font stacks: examples of wide and narrow serif, wide and narrow sans serif, and monospace.
  9. Font selection: Webfonts (such as Typekit) are changing how fonts are rendered within web browsers.
  10. Emphasis
  11. Scale
  12. Rags
  13. Combine all of the above in a thoughtful fashion. All of these elements are interrelated. A change in one setting will affect another. Address all of the elements together as a set for successful typography.
  14. Re-use CSS styles. Use a single external CSS style sheet file that can be linked to all of the web pages within your site.

The goal: readability

Format paragraphs for readability and pages for easy visual scanning. Use leading and spacing settings in CSS to create typographical "textures." Create a single style sheet that can be used for consistent typographical presentation throughout your web site. In commercial projects, a company or product style guide often needs to be emulated through CSS styles.

Other issues

Decide how many fonts are appropriate for your page. Remember that fonts can vary in size, case, style, and color.

Understand the difference between on-screen and print versions of the same content.