Adventures in Typekit

One of the many great things about working at Inventables is that we, the development team, are continually afforded the opportunity to experiment with—and even implement—cutting edge web technologies like CSS3, HTML5, Typekit, and many others. Because we’re small and nimble we are able to adapt quickly to the changing landscape of the modern web. It’s a great atmosphere in which to create.

But while being at the cutting edge is great for our team’s morale, we must balance our excitement with restraint. Using advanced and not-always-fully-supported web technologies is an exercise in trial and error, frustration and reward.

Case in point: Typekit, the web-font hosting service that has been gaining popularity in recent months.

Where Typekit succeeds

Typekit works well as a repository for high quality, professional and legal web-ready (though not always “web-optimized”) fonts. Because Typekit has struck partnerships with several well established foundries they are able to serve up many excellent, complete and otherwise unavailable (due to strict licensing agreements) fonts that free-font sites like fontsquirrel simply cannot. As a result, Typekit takes the guesswork out of choosing custom web fonts. I can browse the site and quickly/easily identify a host of viable fonts without having to worry about EULAs and without being restricted by a limited number of available font weights. Until the WOFF takes off, Typekit and similar font-serving sites like Font Deck provide the best options to those designers looking to use fully-featured, custom fonts on their websites.

The Unfortunate FOUT!

The biggest frustration I currently have with Typekit is with what is known as the “flash of unstyled text,” or FOUT for short, which is an issue that effects websites that use font-linking. The FOUT is an unsightly effect that occurs because of the fact that linked fonts are loaded, like images, after all the other content on a webpage has been loaded. As a result, your back-up fonts (as specified by your CSS font stack) will flash for a few milliseconds before your typekit fonts load. Due to the spatial difference between various typefaces, this produces a distracting “visual hiccup” that can make a site look broken even to the most oblivious of non-designers. To put it bluntly, the FOUT sucks. It is for many who would otherwise commit to a Typekit service plan, an outright deal breaker.

Now unfortunately for the folks at Typekit (who are painfully aware of this problem and taking on much of the blame), the FOUT is an issue that affects everyone using linked fonts whether they employ a third-party solution or host fonts themselves. As far as I’ve been able to tell, it’s a browser based issue. Typekit performance appears to vary, to some degree anyway, between Firefox, Chrome, Safari, and IE.

Nonetheless, much to my disappointment, the only way I found to effectively manage the FOUT was to significantly reduce the file size of my “type kit” to around 75k, or just one font with two weights. So much for my dreams of versatility!

With that said, Typekit is working on improving this issue and they have made some experimental solutions available that seem quite interesting. However, considering the monthly cost of the service, I am really hoping these solutions move beyond the experimental stage in the very near future.

To keep tabs on Typekit’s response to the FOUT, check out these threads:

http://getsatisfaction.com/typekit/topics/avoiding_the_fout

http://getsatisfaction.com/typekit/topics/flash_of_unstyled_content

So, The Empire Strikes Back…you’re gonna proof those fonts right?

Another equally serious issue I’ve had with Typekit surrounds the display of certain custom fonts on Windows (mainly while running XP). Windows uses a system called Cleartype for anti-aliasing fonts which needs to be turned on in order for font smoothing to occur. In Windows 7 and Vista, Cleartype is turned on by default and Typekit fonts look more or less like they should (if we use OS X as a benchmark). But in Windows XP Cleartype is turned off by default which can mutate the appearance of certain fonts and make them look jagged and unreadable.

Again, this is an issue that the folks at Typekit are not directly responsible for as the problem is rooted elsewhere (in this case, both in Windows XP’s native font rendering settings and the actual “hinting” of the offensive fonts). Nonetheless, it is a real problem that can affect a design in truly serious ways. And though Typekit does offer a robust “type tester” feature that does a pretty good job at approximating what a chosen typeface will look like in each browser, I believe Typekit could do more to advise it users on which fonts are best suited for use in Windows and which are not. Perhaps by flagging troublesome or poorly hinted fonts?

For a discussion of this problem, check out these threads:

http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems

http://getsatisfaction.com/typekit/topics/only_readable_if_cleartype_is_enabled

Conclusion

For the time being, we are still using Typekit here at Inventables, despite its shortcomings. We believe in the “case for real fonts on the web” and prefer the greater freedom and flexibility that using custom fonts provides. However, despite our hopes for Typekit, we believe it still has some issues to work though before it becomes more widely adopted.

—Written by Billy