Typekit has been around for just under 4 years now and is a staple in my web design toolkit. Veen and the team there led the way in improving the delivery of web fonts, providing good or better features and results than all the other options available.

Add to that a great selection of fonts and it's a pretty easy decision to make use of the service.

Only now there's a new option.

Cloud.typography from H&FJ

Hoefler and Frere-Jones have also been a pillar in the design industry for some time and their fonts are some of the most popular and frequently used out there. Designers have long wanted to have the H&FJ collection available as webfonts. It was rumoured that they were working on such a service, with many popular web all stars being the beta testers.

At the beginning of the month, the service launched. The question to ask is which service is better? There may not be a straight forward answer, but the exercise of comparison is a good one regardless.

Price

At initial glance, Typekit takes the lead here. Cloud.typography starts at $99 per year, giving you 250,000 pageviews per month. Typekit's lowest plan is $24.99 per year, but it comes with a much lower volume at 50,000 pageviews per month.

However, Typekit's next tier allows for 500,000 pageviews per month, and at half the price of Cloud.typography's lowest tier, coming in at $49.99. For the same price, Typekit allows for 1 million hits per month, 4 times that of their newest competitor.

But forget pie in the sky numbers for a moment. It's clear that most small designers, plus bloggers and writers, don't require volumes in the millions each month. So it would seem that Typekit has positioned themselves to be the option for the everyman, whereas H&FJ are looking at the bigger players, digital agencies and big brands.

On the other hand, $99 per year isn't going to break anyone's bank and it's a bit like arguing that your favourite iOS app is a little steep at $4.99. So it terms of pricing overall, both services are good, no great, value to the customer.

Update: Jonathan Nichol makes a great point when it comes to the pricing of Cloud.typography. The cost of using the service is $99, which gets you five font families for free. More than that and you have to purchase the font. You can then purchase for the desktop and the webfont comes free. Or you can just purchase a webfont version. Shame on me for not recognizing that distinction and thank you to Jonathan for bringing that up.

Advantage: Typekit

Variety

Again, Typekit would appear to have the advantage. A clear advantage. Cloud.typography supports but one foundry, that of its creators. Typekit supports many foundries, many of whom are almost as popular as H&FJ. Not only that, but once Typekit was bought out by Adobe, the entire collection of Adobe fonts was added.

Now, we are talking about H&FJ here. Offerings such as Gotham, Sentinel, Tungsten, Whitney, and Archer are among the most beloved fonts available today. Designers with a serious crush on this foundry will no doubt pay the $99 in a heartbeat … or already have.

It's simply a matter of what font you're looking to use in your designs. But if there is some flexibility in your choices, than Typekit gives you a lot more to choose from.

Advantage: Typekit

Ease of use

Price and availability of fonts are the most important factors when choosing a service of this type. But a good tool is also one that is easy to use. Do both services work simply, with little fuss and configuration? Let's look at the most minimal process involved for each that is required to get fonts displayed on a live web site:

Typekit:

Add fonts to kit > Publish kit > Paste script tags to HTML > Add CSS declarations > Enjoy

Cloud.typography

Brandon Durham, front end dev for H&FJ, pointed out that the minimal requirment to get started with their service is this: Add fonts to project > Add CSS link to HTML > Add CSS declarations > Enjoy. While this is true, I wanted to capture the entire process. I used the term “live web site”, where perhaps “production” would have been a better term.

Add fonts to project > Add CSS link to HTML > Switch project from Development mode to Production mode > Specify location of production server > Download webfont folder > Add unarchived webfont folder to web server > Validate location of webfont folder in Cloud.typography Dashboard > Enjoy

As you can see, Typekit has a slightly simpler process and Cloud.typography takes a bit of work. Nothing too serious for a web developer, but it again appears that the two services are targeting a slightly different clientele.

Font quality

Updated: Shortly after publishing this piece, I received an (unexpected) email from Jonathan Hoefler. He politely thanked me for trying out the service and writing my thoughts. But he also had this to say:

The one thing I'd hoped you might touch upon is the quality of the fonts. One of the things that absorbed so much of our attention over the past four years has been designing and engineering fonts that are reliable all the time: so much of what other services offer aren't really webfonts, they're "fonts in a browser," which behave unpredictably on Windows, terribly at small sizes, and in other places where people do a lot of reading. I think that the effort we've put into our library — especially the ScreenSmart fonts, described here — is really one of the most important things that distinguishes Cloud.typography from other solutions.

I appreciate his point. As the end user, and even more so as a reader, it's easy to focus on the simple aspect of availability. Quality is another aspect entirely. I haven't yet had the chance to test the quality of Whitney on IE8, but I'm glad Jonathan raised the point. The fact that he and his team sweated over these details is excellent news for the rest of us.

And Typekit? While I can understand Mr. Hoefler's confidence in his own team, my experience has been that the team at Typekit has also worked hard to ensure fonts are delivered correctly for all users on all devices.

During my years using Typekit, I've subscribed to their blog as well. Posts such as Type rendering: the design of fonts for the web were insightful and gave this customer the impression that experts in the field were focused down to the last detail. Their entire series on font rendering is worth your time.

Advantage: Draw

Culture

Adobe, H&FJ. In design circles, those are big names. And for the past decade, Adobe has been a name that designers often used in conjunction with expletives. But that may may changing …

In recent months, Adobe has made changes and released a tools that seem to be adopting a new strategy. One that embraces the web and the changes to how designers and developers work, rather than clutching to past methods and insisting designers change with them. All right — Photoshop is a still a pain to deal with, but several new tools are encouraging.

H&FJ can do no wrong, however. Their offerings are among the best and they are widely respected as master of their craft.

Advantage: H&FJ

Working locally

Hammer & Anvil are the tools I use for developing a site locally and they work great with Typekit. Is it the same case for H&FJ's new service?

And indeed it is. Just as with Typekit, you simply add your Anvil URL (something like hfj.dev) into the list of domains in your Cloud.typography Dashboard and you're up and running!

Advantage: Draw

HTML Email

Sadly, no dice. I've long wanted to be able to use Typekit for email campaigns (and for our customers, but the JS delivery mechanism means email clients won't support it.

But it is possible to use Google Webfonts in your email campaigns, due to a different delivery mechanism. Seeing as Cloud.typography is CSS based, I had hoped that it would be usable in this scenario. Sadly, it does not seem to be the case. My testing proved fruitless and the support team at H&FJ confirms that it is not possible (yet).

Advantage: Draw

Verdict

Overall, Typekit is a slightly easier to use service. Both offer great fonts, decent pricing, and are technically sound. The primary reason a designer would use Cloud.typography is when he/she absolutely needs to use a H&FJ font in a design. Otherwise, the options lean toward Typekit.

I personally will continue to go to Typekit first, but am glad to have the option of using H&FJ fonts in my designs.