Web typography discussion

I had a good conversation with Michael Wood yesterday whilst I was writing up a document on why I felt our design team, going forwards, should be using Cufón instead of sIFR for text replacement. Michael pointed me in the direction of a couple of sites that were inspirational to him and put forwards the argument that he has read too many times the cussing from web designers complaining about the lack of typefaces available that are considered web safe. Safe fonts are those that are regular system font installations for either PC or Mac. Those same web designers that complain could in fact vastly improve the typography of their sites by learning typographic skills. When looking at their personal website and sites that are in their portfolio it is clear to see that they haven’t mastered the art of type setting for the web.

Rather than calling web safe font’s ugly typography and search alternative typefaces and methods to deploy them, designers should first develop type sensitivity. Is their a vertical rhythm to the typography on the website? Are you using a typographer’s scale? Is there a clear hierarchy of H1, H2, H3, P tags? Does the leading (line-height) require increasing or decreasing? Is the kerning (letter-spacing) normal or would it look better with more or less pixels between each character? How about the amount of words per line – comfortably for reading online we should use between 11-14 words per line for passages of type. Have you uncluttered the guttering yet? A larger gutter between grid columns can improve readability and the elegance of typography.

Using the fine adjustment techniques above, the clarity and beauty of the web safe typefaces we have available to us becomes clear. Even the use of emboldening and emphasising key typographic areas can vastly improve an otherwise uninspiring type set for a web page.

This won’t of course stop me from hunting down new typefaces and ways to deploy them online. Each typeface tells a different story and assists the branding. However, this is food for thought and all the necessary type setting techniques should be used in conjunction with the chosen typeface. Simply replacing system font text for a sassy typeface just because you didn’t like the look of the system font is plain lazy and without skill.

Another point Michael made which I shall leave you with is that some of the best typography uses just one typeface. Take a look at this example Michael showed me for the Seed Conference. This site makes excellent use of uppercase, emboldening, italics and all of the techniques I mentioned previously with just one font, Times New Roman. The hierarachy is well defined. I would argue that Times New Roman isn’t a web safe font. It is a system font, but designed for ease in reading of printed documents. Legibility of this typeface at small sizes on screen is poor.


Liked this post? Subscribe to my RSS feed to keep up to date on my other posts.

Tags: cufón, font, gutter, kerning, leading, line-height, michael wood, sIFR, system font, typeface, typography, web safe font

This entry was posted on Saturday, October 17th, 2009 at 12:40 pm and is filed under Web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


One Response to “Web typography discussion”

  1. Ian West Says:

    October 22nd, 2009 at 4:23 pm

    Some excellent points here, but underlying it are some fundamentals of typographic design. An understranding of typography for print comes first, then you can appreciate the differences you need to apply on the web. Don’t waste time searching for the ‘next’ great typeface until you can handle the basics. In 1928, German typographer Jan Tschichold codified the principles of modern typography in his book The New Typography – I wonder how many web designers have even heard of it! Last thought – “The best typography is never noticed – you are too busy reading the copy!”

Have your say



XHTML: You can use these tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>