Web typography showdown

Roughly a 7 minute read by Fred Lorenzo

Typography is one area of the web which has seen huge progress in the last few years. It's hard to believe that until 'fairly' recently, designers and developers were stuck to using just a small selection of typefaces on the web such as Arial, Georgia (and Comic Sans!) But fortunately, now there are thousands of webfonts to choose from, available from various webfont services.

With Hoefler Frere-Jones releasing their new webfont service, Cloud Typography, last week, I've decided to take a look and see how it compares to other services that are currently available for designers & developers.

H&FJ's Cloud Typography

Cloud Typography Rundown

  1. Number of web fonts: 900+ fonts
  2. Ease of use: Very simple CSS implementation
  3. Subscription fee: From $99 a year up to $299, with large plans available.
  4. Popular typefaces: Gotham, Mercury, Knockout, Sentinel

This is the one that many of us have been waiting for. Some of the H&FJ typefaces had been granted use on the web before the release of Cloud Typography, however this was only for a very select few, and now classic typefaces such as Gotham and Mercury are available for to all - for a fee of course.

With the release of cloud typography, the whole H&FJ collection is now on offer, as well as the release of 250 new fonts called the ScreenSmart collection, which is a set of typefaces designed specifically for the browser, and one which we're excited to start playing with here in the office!

H&FJ's Cloud Typography →


Typekit Rundown

  1. Number of web fonts: 1000+ fonts
  2. Ease of use: Easy to use but a longer process than some of the others. Javascript based.
  3. Subscription fee: $24.99 up to $99.99. Adobe Creative Cloud subscriptions come with a free Typekit Portfolio plan.
  4. Popular typefaces: Proxima Nova, Adelle, Museo, Freight Sans

Typekit is the long running web font service that was recently acquired by Adobe. There are many popular high quality typefaces available, including a number from the FontFont foundry.

One of the new exciting features to come to Typekit is the ability to use Typekit fonts on your desktop, through the use of their Creative Cloud app. While the feature is not available just yet it is "Coming Soon" and could be a big game changer, since it will allow you to preview the whole Typekit catalogue in mockups, which is something I've been personally waiting for for a while.

Typekit →

Google Webfonts

Google Webfonts Rundown

  1. Number of web fonts: 629 families
  2. Ease of use: Very easy, quick and simple
  3. Subscription fee: Free!
  4. Popular typefaces: PT Sans, Playfair display, Lato, Merriweather

Google webfonts is one of the only free services available. They offer many open-source fonts which are specifically optimised for the web. They also encourage users to support and fund type designers on Kickstarter so that their fonts can appear in the Google catalogue. One of the great features of Google webfonts is that all of their fonts are also allowed to be downloaded for free, for desktop use, which is great if you are wanting to use them in design mockups.

One disadvantage to the service is that, because many of their typefaces are open source, it means some of the fonts can suffer from quality issues when compared to other paid webfont services and many of the fonts will often only have one or two weights, instead of a full family.

Google Webfonts →


Fonts.com Rundown

  1. Number of web fonts: 20,000+
  2. Ease of use: Can choose either Javascript or CSS implementation
  3. Subscription fee: From $12 a month up to $119 a month
  4. Popular typefaces: Neue Helvetica, Avenir, Trade Gothic, Futura

Fonts.com has got the biggest font collection of all of the services. With a huge catalogue of desktop fonts up for sale, they offer many of the same fonts in their webfont catalogue, with over 20,000 available. This includes typefaces from celebrated foundries such as Monotype, Linotype and ITC.

Fonts.com subscriptions include a varying number of "Mockup fonts" which, as the name suggests, allow you to test fonts in mockups, although these fonts remain active for one day only. The upper tier subscriptions also include desktop fonts, which is similar to mockup fonts except they remain active for 30 days and they also come bundled with software such as FontExplorer X and Typecast App (more on this later).

Fonts.com →

Choosing a Service

Whilst it is important that you choose the right webfont service for yourself or agency, it is still more important to choose the best typeface for the project. Because webfont services don't all serve up the same fonts it means that you can sometimes end up using multiple webfont services on the same site. This can get a little cumbersome to manage and often it's hard to see how different fonts will work together between services without setting up a live example page. But that's where Typecast App comes in!

Typecast App

Typecast app, (recently voted game changer of the year at the .net awards) is an extremely useful browser-based app that allows you design in real-time using typefaces from all different webfont services with ease. Designing directly in the browser will let you preview the exact readability and rendering of the type, whilst the app compiles all the relevant HTML and CSS in the background.

"We built typecast to make it easier to work with web type & hopefully make the web a more beautiful, readable place"

Typecast app allows you to design, compare and experiment with over 23,000 different typefaces, much quicker than mocking it up within any desktop application. It gives the designer the ability to very easily create and a share a preview of their work, as well as create a style guide so they can share their design decisions with the rest of the team.

I've had the chance to use Typecast App since the beta, and I think it is a wonderfully useful tool for working with webtype. My only gripe would be that I can't integrate it into my workflow more!

Typecast App →


So is there really a 'best' web font service out there? Each service has got its own pros and cons but I feel it is mostly down to the personal preference of the designer/developer as to which you choose. Some may prefer the ease of use of Google Webfonts, or the catalogue of fonts.com or HF&J Cloud typography, but again it is most important to remember to choose the right typeface for the project. One small change to the typography of a web page can have a huge impact on readability and legibility which in turn can greatly effect how a user interacts with a website and ultimately website performance.

If you're having trouble choosing, many of these services allow you to open a free account or choose a free subscription plan so that you can test them out, in combination with the free 14 day trial for Typecast App, it should be easy enough to find out which service is the best for you. Personally, I've had the most experience with the Typekit catalogue, but I look forward to fully exploring Cloud Typography with its great typefaces and all of its features.

Which webfont service do you use? Are there any other webfont services or useful resources that you think I've missed? Let me know in the comments below!

Useful typography resources