Update A lot has changed in the world of web typography since I wrote this post! This information is still useful, but some aspects of it may be a bit dated. For instance, with services like TypeKit being quite common now, your font options are no longer limited to a handful of system fonts. The topic certainly warrants another, updated post, so stay tuned.

Of course, achieving exquisite typography in web design is a whole new ball game—one in which I was all too eager to participate.

One of my favorite elements of graphic design is typography. For the past few years I have found great joy in fine-tuning every minute typographic detail that I am presented with. My inner nerd has proudly embraced kerning, baseline grids, alternate characters, ligatures, glyph palettes, font management software, em dashes, and, well, this list could go on for quite some time.

Just when I was getting a little too comfortable with the thrilling world of printed type, I became interested in web design. Of course, achieving exquisite typography in web design is a whole new ball game—one in which I was all too eager to participate. Typography on the web presents many new limitations and challenges to the seasoned print designer. Font choices are restricted to just a handful of standard, web-safe fonts. All of the useful text-formatting tools of InDesign are out the window. You can say good bye to full-justified text—it doesn’t stand a chance of surviving the lack of hyphenation on the web! Yes, the web is truly an unforgiving place for typography. But this setback only serves to make it more rewarding when you make stunning, print-worthy web typography.

Seed Conference Website

Coudal Partners designed this well-known, purely typographic site for the Seed Conference

8 Steps to Great Typography on the Web

  • Bring on the HTML entities.

    HTML entities are necessary for incorporating proper punctuation and special characters into your web site. Hatch marks just don’t cut it for a serious typographer, and using the correct HTML entity to represent opening (“) and closing (”) quotation marks is a must. Beyond that, simply browsing a chart of HTML entities offers great inspiration for the use of potential characters you may not have considered before. The WDG Special Entities chart is a great resource.

  • CSS is your friend.

    CSS is a powerful typographic tool for the web. It provides the means to format your typography in a multitude of ways. CSS can be used to do everything from specifying leading and tracking to achieving drop caps. Some properties you should make use of include:

    font-variant: smallcaps/normal; 
    text-transform: capitalize/uppercase/lowercase; 
    letter-spacing: em; 
    line-height: em; 
    p:first-letter {font-size: 300%;}
  • Use italics for variety.

    The italic variations of certain fonts are often more interesting than the regular faces. Two of my favorites include Georgia Italic and Cambria Italic (a Windows Vista system font that will hopefully be gaining in popularity in the next few years). These stylish variations on web fonts make for great headers and add a touch of variety to your web site. Check out Typechart to preview other system fonts and their variants that you might not have typically considered.

    Type Chart

  • Have some fun with your ampersands.

    If you are familiar with Robert Bringhurst’s Elements of Typographic Style, you may remember his insistence on using the best available ampersand at all times. These words of wisdom can and should be applied to web typography as well. Get creative and explore your options for ampersands! There is a great post on SimpleBits about ampersands on the web that you should check out.

    Pith & Pulp

    Jon Tan’s web site fea­tures this beau­ti­ful Baskerville italic amper­sand through the use of CSS.

  • Be creative with your font choices, and offer similar web-safe fonts as backup.

    Use CSS to specify a few fonts rather than just one web-safe font for your text. While everyone will not have your ideal font choice on their computers, at least those that do will be in for a treat. Specifying your font choices in order from your ideal font candidate to a standard font choice gives your design greater flexibility. For example, a look at the CSS used on Jon Tan’s web site reveals a preference for four font choices before settling on the browser-default serif font:

    font-family: baskerville,palatino,'palatino linotype', georgia,serif;
  • Use border-bottom rather than the underline property on links.

    The underline property is commonly used to format links on a page. While this format is a widely recognized symbol for a link, it is not kind to the descenders of letters. Rather than using this property and having your y’s and g’s cut through by the underline, make use of the border-bottom property. Simply use the following CSS to create a type-friendly underline effect:

    border-bottom: 1px; padding-bottom: 1px;

    Underline vs. Border-bottom

  • Make use of the numerous typographic tools on the web.

    WP Typogrify is a very useful WordPress plugin that automatically converts common typographic faux pas (such as hatch marks and double-dashes) to the formatting of a true typographer. sIFR is another useful script used for inserting rich typography into your site while maintaining search engine friendliness and accessibility. A very helpful sIFR tutorial can be found on CSS-Tricks.

  • Form follows function.

    The idea that form should follow function is more important than ever on the web; web standards and accessibility should always be a priority. Luckily, a truly beautiful design can be achieved when you take advantage of the capabilities of CSS and use your own creativity to achieve professional and artful typography.