@font-face-off: Typekit vs. Font Squirrel

Now that the curtain has come down and now Typekit is available to all, let’s see how Typekit and the previously mentioned Font Squirrel stack up head-to-head.

Selection

It’s ironic to even compare font selection between these services when we’ve been stuck with such a limited set of web safe fonts for nearly two decades. Even so, it’s interesting to compare both the depth and quality of the fonts provided.

Depth

Typekit: Nearly 296 available families depending on plan: the Trial plan includes 69 families, the Personal plan includes 231 and the Full plan offers 296 families.
Font Squirrel: 488 families. Not enough? Check the license on that favorite free font and then add your own.
Winner: Font Squirrel: With almost two hundred more font families available, Font Squirrel is the clear winner.

Quality

Comparing font quality is somewhat subjective, but heading into this comparison, I expected to find a much higher caliber set of fonts on Typekit since their business model includes negotiating with foundries to license fonts for web embedding that otherwise wouldn’t be. However, I find no real difference between the quality of fonts provided, and some free (as in speech and beer) fonts appear on both.

Draw: No clear cut edge on quality. Perhaps this will swing to Typekit as foundries come on board.

Usability

Let’s face it. A big part of punching up your web typography is actually finding the right font. Let’s see how each site helps you wade through all those typefaces.

Navigation

Typekit: Typekit offers a delicious-style drilldown navigation. You can start with basic styles like serif, sans-serif, or monospace and further drill down using tags such as display, headline, or grunge. However, you can’t search the entire library unless you’re logged in. Once you’re logged in, you’re limited to just the fonts in your plan. Bottom line, there is no way to search the full library unless you upgrade to the full plan.
Font Squirrel: The browsing experience on Font Squirrel isn’t quite as robust as Typekit. While you can still browse and paginate by basic font families, the lack of tags and secondary navigation makes it tedious to get through some of the larger style categories. However, one cool thing Font Squirrel provides is the ability to view all the fonts from a particular foundry. I look for Typekit to add this soon.
Winner: Typekit: Even with the lack of search, the tag-based navigation gives the edge to Typekit

Preview

Both sites do a great job of previewing fonts including specimens and weights & styles, but each site offers some unique features.

Typekit: The specimens provided by Typekit range from 9px to 36px and are absolutely gorgeous. Typekit also provides both dark-on-light and light-on-dark previews in several contrast levels.
Font Squirrel: Character maps really enhance the Font Squirrel previews. When choosing a font, it’s important to know what characters are supported.
Draw: I’m hard to please. I’d love to see Typekit’s line height range and Font Squirrel’s character map.

Setup

Once you’ve picked that perfect font, you’ve got to add it to your site. The process is a bit different for each service.

Typekit: configure and embed: To use a font, you create a font kit using the font editor. You can select multiple fonts, choose the weights and styles to include, the CSS selectors to which you’d like to apply them, and additional web safe fonts in your font stack (to display while your fonts are downloading the first time a user hits your site). Once your selections are made, Typekit provides an script embed snippet to include in your page head and you’re all set.
Font Squirrel: download and edit: Taking a different approach, Font Squirrel provides @font-face kits, zip file downloads containing all the font formats, CSS code, and demo files you need to add fonts to your site. Simply copy the font files to your server, add the CSS rules to your stylesheet and you’re all set.
Winner: Typekit: The ability to fine tune as well the ability to update a package on-the-fly without a deploy gives the edge to Typekit for this round.

Reliability

One of the recurring questions that arises in discussing Typekit with my designer friends is, “What if they go down?” Honestly, chances are your site will be down more than theirs.

Typekit: hosted: Distributed servers worldwide helps Typekit serve fonts fast and reliably.
Font Squirrel: self-hosted: Since you host your Font Squirrel fonts yourself, your fonts are served out of your own hosting bandwidth agreement and is as reliable as your own site.
Slight edge: Font Squirrel: For me the question of reliability is more about implementation than network questions. Since Typekit relies on JavaScript, an error on your page from any script or widget potentially could prevent your fonts from rendering.

Price

Because almost everything usually comes back to budget, let’s look at the cost comparison between the two services.

Typekit: free and paid: Typekit offers both free and paid plans, but to get the full library, you need to fork over $204 a year (or $49.99/yr for a limited time). This gives you full access to all Typekit fonts for up to five web sites.
Font Squirrel: 100% free: There is no charge for Font Squirrel fonts. Bandwidth costs come into play as with any other web asset, but if you’re serving that much traffic, you’re probably already using a Content Delivery Network or Amazon S3, right?
Winner: Font Squirrel: Font Squirrel is the clear winner here, especially if you consider that you’ll still have to rent those fonts from Typekit even if you’ve already purchased them to use in print or other non-web digital creations.

Bonus: Eat your own dog squirrel food

You can’t peddle unapplied truth. While you can no doubt create great designs with the web safe font stacks, if you’re running a site that touts the breakthroughs of web typography, how about giving us something more to look at than Arial and Georgia. I find it surprising that I couldn’t find an example of Typekit using the fonts they serve in their own site out side of their gallery.

Font Squirrel, by contrast employs the very fonts it showcases.

Summary

The bottom line is both of these services are great and are advancing web typography. The decision as to which to use comes down to what font you need, your budget, and how comfortable you are editing your own CSS and hosting your own fonts. So go kick the tires on both and make something beautiful!