Typekit First Impressions

Simon takes a look at Typekit, a new way to use a wide range of fonts on your website without resorting to images. Does it live up to expectations?

Typekit logoIn this article, I'll be giving my thoughts and first impressions on one of the newest ways to integrate great typography with your site: Typekit. Much heralded by the web design community, Typekit launched in November 2009 and allows you to use a much wider selection of type styles than the basic system fonts shipped with a PC or Mac, without resorting to using images.

Typekit should be something of a magic bullet, bringing in a renaissance of typography on the web, but how well does it really work in practice? I've been delving into its innards to find out.

How does it work?

First, let's have a look at how it works in practice. If you're used to working with HTML to create content, and CSS to style that content, you're not going to have any real problems.

The process for getting the fonts onto your page is this:

  1. Go to typekit.com and sign up for an account (there's a free option to get you started).
  2. Add a small chunk of JavaScript provided by Typekit to the head element of each page on your site. This just links your site to your account.
  3. Browse fonts on Typekit, and choose the ones you want to use.
  4. "Publish" from within Typekit's popup editor to associate these fonts with your site.
  5. Add definitions to your CSS and/or HTML to show the Typekit fonts. Save.
  6. Preview your site in a browser — ta-da!

Once you're happy with your font choices, the new fonts display to everyone browsing your site, and you have nice accessible HTML with new and distinctive typography. The fonts respond to all the normal CSS definitions, so you change size, colour, letter spacing, and so on through your CSS as normal.

All of which is great, but as you can see from the list above, it is somewhat fiddly, and a slower process than just working with system fonts and pure CSS. It's faster than messing around with images though, but you do need to learn a slightly different way of working.

The Typekit popup editor lets you associate the fonts with your site
The Typekit popup editor lets you associate the fonts with your site

I found in testing that it feels somewhat cumbersome, and unless you know from the off which fonts you'll be using, you'll have to constantly test different combinations of fonts. Each time you change a font, you have to go round steps 3-6 above, which is laborious. I'd suggest to Typekit that having a way to preview headlines, subheads, paragraphs and so on at their end of things would make life a lot easier! If you could also edit the CSS in this preview mode and then just copy and paste the final code, that would be the icing on the cake.

It's worth mentioning that on more than one occasion I found myself hitting refresh on the browser, wondering why a new font hadn't shown up, only to realise I'd forgotten to hit "Publish" on Typekit. As I say, it's a bit fiddly, but nothing you can't learn.

How does it look?

This is the crux of it all. If it looks wrong after all that fiddling around, it's worth nothing. Happily, the short answer is that it looks pretty good. On a system with decent font antialiasing, you'll never tell the difference between the Typekit fonts and an image. See below for some screenshots on PC and Mac systems:

A Typekit-enabled page on Firefox 3.5.3 (Windows 7)
A Typekit-enabled page on Firefox 3.5.3 (Windows 7)
A Typekit-enabled page on IE 7 (Windows XP)
A Typekit-enabled page on IE 7 (Windows XP)
A Typekit-enabled page on IE 8 (Windows 7)
A Typekit-enabled page on IE 8 (Windows 7)
A Typekit-enabled page on Chrome 4 (Windows 7)
A Typekit-enabled page on Chrome 4 (Windows 7)
A Typekit-enabled page on Firefox 3.6 (Mac OS X)
A Typekit-enabled page on Firefox 3.6 (Mac OS X)
A Typekit-enabled page on Safari 4 (Mac OS X)
A Typekit-enabled page on Safari 4 (Mac OS X)
A Typekit-enabled page on Chrome 4 (Mac OS X)
A Typekit-enabled page on Chrome 4 (Mac OS X)

As you can see, on Windows (from XP to Windows 7), with its somewhat flawed antialiasing, the fonts still have that jaggedness associated with HTML text, but on the Mac, it just looks like it should: smooth and elegant. Interestingly, Google Chrome seems to take its font rendering from the host system, so looks nice on the Mac, and much the same as IE on Windows 7.

In typekit.com's font library, you can see samples of each font in the major browsers by clicking on the Browser Samples tab when you're on each font's detail page.

The system uses the CSS @font-face technique to serve the fonts, which is supported by the major recent browsers. In practice you don't have to deal with the actual @font-face embedding, though, which is a major plus.

Non-supported browsers will see the defaults you define in the the CSS. In the screenshot below you can see Firefox 3.0 under XP, which displays the default CSS settings I've defined — Helvetica for the heading and Georgia for the body text:

A Typekit-enabled page on Firefox 3.0 (Windows XP)
A Typekit-enabled page on Firefox 3.0 (Windows XP)

A note about Firefox. In my tests, in both Windows and Mac versions of Firefox, you see the default fonts for a second or two before the Typekit fonts appear, which is a downside. This doesn't happen in any other browser though.

Pricing structure

The pricing structure has four main differentiators:

  1. Bandwidth
  2. Number of sites you plan to use the fonts on
  3. The size of the font library available to use
  4. The number of fonts you can use per site

The free option is good for putting a toe in the water to see how the system works. Indeed, if you just want to get a particular font on one site, this would do you just fine, though a Typekit badge will be displayed on your site.

For more professional use though, you'll probably want the "Portfolio" option which allows you full access to the font library over five websites, with unlimited fonts per site. At $49/year, this seems pretty reasonable.

Font choice

Typekit has tiers of font availability, so on the free account, you really have only a taster of the full library. A "Personal Library" adds more, and pro users get the full set.

Fonts are organised by style (serif, sans-serif, script etc) and also by tag. It's easy to whittle down your choices to fonts that make sense in the context of your needs, and the fonts available are good quality from proper foundries like TypeTogether.

Browsing fonts in Typekit
Browsing fonts in Typekit

I was disappointed, though, to find none of the classic fonts. If you want, say, Garamond, Sabon, Franklin Gothic, Helvetica Neue or anything else you've likely heard of, you're out of luck. I suspect this is due to licensing issues and the older font foundries like Linotype not wanting to get involved in this new-fangled web thingy, but I could be wrong. Regardless, it means that you're restricted to more modern fonts, which is not necessarily a bad thing, but it means that we're still a long way from being able to use any font without worrying about it.

The old foundries move very, very slowly on just about every issue though, and expecting them to work at web speed where things change dramatically in six months is probably unrealistic. They do run the risk of being left behind, but I suspect that their type libraries are compelling enough that people will continue to use them however difficult they might make it.

Do we like "renting" fonts?

This is the philosophical question behind Typekit. People feel worried about effectively renting fonts which reside on someone else's server, both in terms of ongoing expense and stability.

If you create a site for a company and accept that it's going to be up for, say, three years, you could end up paying for that font several times over. I'd argue though that the economics work out, bearing in mind the alternative cost of buying fonts and the fact that you'd likely spread the costs by using several fonts over several sites.

Less clear though is the issue of stability. If for any reason something goes wrong, all your nice type reverts to your basic CSS defaults. What happens if after a year you simply forget to renew? What happens if Typekit go broke? What happens if they have catastrophic server failure?

These are valid questions, especially the one about Typekit going broke. Without the support of the major font foundries (which they clearly don't have given the lack of the "classic" typefaces) that might be a real problem. In this instance, you'd have to go back over all your sites using Typekit and rework them with an alternative solution at your own time and expense. Not an attractive proposition if you use it extensively over multiple sites.

Whether this risk is acceptable is entirely subjective. You have to balance the joy of having the nice type with clean markup against the possibility of having to do all the work again using a different system. The answer will be different for different people depending on their attitude to risk and their attachment to the typographical possibilities.

Pros and cons of Typekit

Pros:

  • You don't have to use images
  • Nice, clean markup and easy CSS styling
  • You can use a wide range of non-system fonts
  • Nice cataloging and organisation of fonts
  • Reasonable pricing

Cons:

  • Fiddly to use in practice, especially to "try out" fonts
  • Popup editor window seems like something of a kludge
  • Fonts don't appear immediately in Firefox
  • Not a massive selection, even at pro pricing levels
  • You have to be comfortable "renting" fonts
  • Potential stability issues

Conclusion

Overall I like Typekit. It's reasonably easy to use, although a bit fiddly, and the fonts are of good quality. I like being able to style the fonts using ordinary CSS and the pricing is reasonable if not compelling.

The big test for me, though, is whether I feel it's enough of a game changer that I'll actually part with money for the service. Right now, the answer is no. The big issue for me is the lack of the major foundries. Without their support you're only getting a tiny subset of the fonts available in the world. That said, if Typekit does become popular enough, maybe they'll come on board.

Go and try it, though, and see what you think — maybe it's just what you need! Post a response below, and let me know your thoughts.

Follow Elated

Related articles

Responses to this article

16 responses (oldest first):

01-Feb-10 18:06
Lovely in-depth review Simon - thanks.

To me, Typekit seems like a stop-gap solution until something cleaner (WOFF?) comes along. But it looks like a nice service all the same.

Have you checked out http://fontdeck.com/ and http://www.typotheque.com/ ? These seem to do similar things to Typekit.

BTW I'm surprised how jagged the fonts look in the IE8 and Chrome Windows 7 screenshots. Surely Win 7 can do better than that?!
02-Feb-10 02:53
You'd have thought wouldn't you? Win 7 seems just as awful as XP.

That said, in my experience, Windows people often don't like the OSX font antialiasing at smaller sizes, feeling that it's "fuzzy". Horses for courses.

Simon
02-Feb-10 04:41
There may be a setting somewhere to turn on font smoothing?

Do you run Win 7 in a VM?
02-Feb-10 06:13
No! I got the lovely Scott (www.scottbillings.co.uk) to help with screengrabs on his native Win7 system. We tried all the settings and they all looked terrible =)

Simon
02-Feb-10 16:41
FAIL.
19-Apr-10 13:59
I was initailly excited to start using typekit on my business site, but found that font rendering on every browser besides Safari was sub par.

I instead went with the @font-face generator at http://www.fontsquirrel.com and am really happy with how the fonts render cross browser/OS.
24-Apr-10 22:58
Interesting find Bryan. I found a comparison of Typekit and Font Squirrel here:

http://wynnnetherland.com/2009/11/font-face-off-typekit-vs-font-squirrel/

We actually use Museo Slab via Typekit on www.elated.com. Maybe we could use Font Squirrel instead - Simon, what do you think?
28-Apr-10 04:17
Maybe, yes. The font rendering for Typekit on windows especially is rotten, but then all font rendering is bad on Windows, unless the font squirrel crew have conquered this?

Anyone fancy knocking together some screenshots? You can see how TypeKit renders across browsers/platforms in our "TypeKit: first impressions" article:

http://www.elated.com/articles/typekit-first-impressions/

Simon
28-Apr-10 09:40
Apparently the issues with Typekit have to do with hinting and preparing fonts specifically for Windows...

Here's a comment (http://spigotdesign.com/design/fontsquirrel-com-saves-font-face/comment-page-1/#comment-1173) from Ethan Dunham of Font Squirrel:

"... the reason why a lot of the [Typekit] fonts look bad is that they leave the hinting up to the designer. They do not prepare the fonts in any way for delivery to Windows. Font Squirrel does its very best to hint the fonts and make them workable in Windows. Rendering will only get better as time goes on."

[Edited by Bryan Hoffman on 28-Apr-10 09:42]
01-May-10 17:46
That does sound promising - maybe we'll take a look at FS then, if it has better Windows hinting.

Thanks Bryan. I've just been checking out your blog posts on the topic - very informative!
01-May-10 19:24
Hi! So, I came here from the link (tip) from the Elated impressions on the new look. Read the comments, and you are asking for some screen shots? If so, say something, at least my XP 4:3 and Vista 16:9 screens, don't remember the main settings, I will tell later, as I was saying, if so I will send some screenshots of my screens, the way it is rendered at both. I will even try in my installed browsers, hein? How's that?
Yup... Ehehehhe!

Cheers from Portugal (You'll by me a pint if I go to England one of this days, Eheheh! And yes, I don't even drink! Ehehehe!!!)

Márcio Guerra

P.s.- Can we attach something here or do I need to post the images somewhere else?
07-May-10 01:54
Thanks Márcio, that would be great. The forums don't have an image upload feature (yet!), so the best bet would be to upload them to imageshack and post links to the images here.

http://imageshack.us/

Cheers!
Matt
07-May-10 10:19
Hi again!
So, Matt, give me here a few links you would like to see uploaded, some of the pages you would like to see the screenshot, and I will do it.
I have one account there, for my soccer blog, I can use it to upload the pics.

Cheers from Portugal!

Márcio Guerra
17-May-10 14:25
Hi Márcio,

You've lost us there! Is there any chance you could just get a headline together and take grabs in as many browsers/platforms as you can?

Simon
24-Sep-10 08:51
Interesting that only Firefox 3.6 on OSX seems to kern the 'W' and 'e' correctly...
24-Sep-10 09:47
Hmm, yes, jnewco81, that's true. Good point! And welcome to the forums!

Simon

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page