Testing Cufón, @font-face, and Typekit

Testing Cufón, @font-face, and Typekit

Web fonts have made significant progress in the recent months, thanks to improved browsers and the emergence of new web font delivery technologies. Gone (almost) are the days of messing with sIFR and resorting to images if you’re looking for fancier typefaces for your website; now web designers are offered with many options when considering typefaces. With all these choices, I thought I’d conduct a little experiment to see how they perform.

Methods

I chose to compare what I currently consider the Big Three: Cufón, @font-face, and Typekit (hat-tip to the other web font delivery services out there). I used Nice Web Type’s web font specimen to create specimens for two open-source fonts: Legendum and Sorts Mill Goudy. I made only small modifications and some IE fixes to the web font specimen file. In Internet Explorer 6 and 7 the size cascade layout is off. I added some IE-specific styles in my ie.css:


  .upp .s span {
     margin-right: -96px;
     margin-left: 0;
     padding-left: 15px;
 }

 /* Target IE6 */
 * html .s span,
 * html .upp .s span {
     width: 48px;
     margin-left: 0;
     margin-right: 0;
     padding: 0;
 }

 * html .s {
     margin-left: -48px;
 }

 * html .upp .s {
     margin-right: -48px;
 }

 * html .grid_8 p em {
     display: block;
     border: 1px solid #fff;
 }
 
Web font speciment layout issue in IE 6 and 7 Fig 1. Web font specimen layout issue in IE 6 and 7

and a non-breaking space ( ) in the .clearfix div just before the size 12 line for good measure (bad pun notwithstanding).

I served the two typefaces using Cufón, @font-face, and Typekit. I viewed these pages in OS X, Windows XP (without font smoothing and with ClearType), and Windows 7. I chose not to include Windows Vista in this experiment, as it adds another 30-some screenshots to the test. Also, apologies to Linux users. I viewed these pages in the major browsers: Firefox, Safari, Chrome, Opera, and Internet Explorer 6-8.

Results

A summary of browser/operating system matrix can be found in Figure 2. The summary table posts partial screenshots taken from theoretically the same area of every page.

Web font test summary table Fig 2. Summary of browser/OS matrix.

Cufón

Cufón was the most consistent in rendering fonts, delivering smooth characters across all the different browsers and operating systems — including Windows XP without font smoothing. However, its main drawback is performance; it’s fine if you use it for headings, but in my experience, rendering body text is not really recommended.

Cufon does not display links correctly in some browsers. Fig 3. Cufón displays links incorrectly in some browsers.

Another drawback for Cufón is how it handles links. In Windows XP and 7, all browsers except Firefox do not render links with text-decoration: underline when using Cufón. Links with a background color are visible, though hover effects may not be what you intended (see @font-face vs Cufón in Figure 3).

@font-face

I like @font-face in the sense that it follows the spirit of open web standards, but implementing it can be rather confusing. Furthermore, you’re limited to open source fonts.

Font rendering using @font-face is inconsistent. A serif font like Sorts Mill Goudy looked terrible in Windows, even with ClearType. My sans-serif font (Legendum) fared much better. However, in this case Windows is probably more to blame than the technology itself.

Typekit

I really like Typekit and the flexibility and selection it offers. It’s also been proven to work on entire sites. You can even preview how their fonts look in different browsers. Unfortunately, Windows rears its ugly head again, and Opera is left out of the party as of this writing. There were two curious examples, both involving Sorts Mill Goudy. First, I found was rendering Sorts Mill Goudy in Firefox/Windows XP without font smoothing. Typekit served up italics, an effect not found when I enabled ClearType. Second, Sorts Mill Goudy did not render properly at all in Safari/Windows 7 (see Figure 2).

Notes

In my tests with Legendum, Windows XP browsers had problems rendering its “u” when using @font-face. I did not replicate that effect when I tried another sans-serif font such as Junction. I suspect it had something to do with the font file itself, though I am not sure what.

Conclusion

OS X vs Windows

It wasn’t even a contest — font rendering in OS X was superior to Windows. Perhaps I’m biased, but fonts just look better on a Mac.

As for capturing screenshots,

For those too lazy to read the article, here’s the bottom line:

Cufón

Pros:

  • Consistent font rendering
  • Easier to set up than sIFR

Cons:

  • Inconsistent link decoration
  • Performance might be an issue
  • Restricted by font EULA

@font-face

Pros:

  • Web standards

Cons:

  • Inconsistent across browsers; particularly bad in Windows XP without font smoothing
  • Must use open-source fonts

Typekit

Pros:

  • Easy to set up
  • Many fonts to choose from
  • Can preview fonts within different browsers

Cons:

  • Free account comes with limited library
  • Not supported in Opera
  • Inconsistent in browsers

In summary, I would recommend Cufón for headings, with the warning that links may not display as nicely as you’d like. @font-face is promising, but the lack of available fonts really limits you. I really like Typekit, and I already use it for my personal blog.

Comments

There are no comments yet


In Association With