“Better typography improves reading and understanding, and makes the experience of the web better for all users, not only those who obsess over the details. Good typography can mean the difference between a reader getting all the way to the end of an article — and looking for more — versus giving up with fatigue after the first paragraph. When paired with smart copywriting and a good strategy, it can invoke a sense of trust in an application or service; it can help persuade someone to buy, or foster an emotional connection that keeps users returning.”—Mandy Brown (@aworkinglibrary) on How Cloud Computing Made Web Typography Better For Everyone | Co. Design
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:
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:
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
How to identify web fonts on the iPad
Sometimes you’ll visit a web page and spot a font in use that you think is gorgeous, with legibility that’s just perfect for that project you’re working on. The smartest way I’ve found of identifying a web font, and even detecting the service used to serve it, is a lovely little js bookmarklet by Chengyin Liu named WhatFont
Fountis a bookmarklet that offers similar functionality, but for me WhatFont is quicker and as it detects the font host it can also removes the step of searching for availability.
Adding the Bookmarklet
Now you can browse the web and when you need to ID a font hit that bookmark and tap on the area of text you wish to check out! Job done.
WhatFont (copy below):
Fount (copy below):
Type Butter: Optical Kerning for Web Type
A work friend and I have begun developing a jQuery plugin that searches for over 500 letter combinations to apply kerning on a page or part of a web page as soon as it loads.
This is great, because, until now, you could only apply letter-spacing with CSS. One look around the web, from a type nerd, and you see kerning issues everywhere.
It isn’t perfect, yet. But over the next couple of weeks we’ll be nurturing our little project to make sure it becomes perfectly handy little tool it needs to be.
Check out TypeButter.com and I’ll keep you posted as the plugin improves.