Choosing a Web Font Service

image

Web fonts are a fantastic way to improve the design of your publication. With the right font choice you can improve legibility, create an exciting and interesting layout, help tell your story, and create a much better experience for your readers. Web Design is 95% typography so it’s vital to get the fundamentals correct.

How web fonts work

Your setup for using web fonts will depend on how you are supplying them – you might be including a few lines of javascript and external files, or linking to an external stylesheet, or hosting the font files yourself and including them using the @font-face rule. Either way, you will be including your required fonts, and specifying them in your CSS.

There’s a huge range of fonts available to use on the web, thanks to the advent of web font providers, who offer a simple, legitimate, and compatible way to have great typefaces in your designs. But who are the best and what should you look for when choosing a web font provider?

Providers

Here’s some of the most popular web font providers, and some type designers that make great fonts designed for the web. Rather than showing their websites, I’ve shown them in use by included some sites that make great use of their services.

Hoefler & Frere-Jones – http://www.typography.com/

Hoefler & Frere-Jones have only recently launched their eagerly awaited web font services, but it’s easy to see that they really focused on quality. There’s a small but beautiful range of fonts, all expertly designed to look as good as possible across different browsers and platforms. Pricing is based on pageviews, starting at $99 per year.

image

In use: A Memoir Project – Mercury Display, Mercury Text, and Gotham.

See also – using shading with Cloud Typography


Typekit – https://typekit.com/fonts

Typekit are one of the more popular web font services, due to their ease-of-use, reliability, and great selection. Fonts are selected and bundled into ‘kits’, which are served on a per-domain basis. Pricing is based on pageviews, with a free trial if you want to try it out.

image

In use: Escape Flight – Futura PT and Oswald (via Google Webfonts)

Typekit will shortly be releasing desktop syncing, allowing you to use their fonts within Adobe Creative Cloud products.


Fontdeck – http://fontdeck.com/

Fontdeck have a great range of fonts, including the classics such as Futura and Baskerville. They charge on a per-font basis, with options for high-traffic websites. 

image

In use: Iron and Wine – 4ad – DIN 1451 Mittelschrift Standard


Fonts.com – http://www.fonts.com/

Fonts.com belong to Monotype, so there’s a huge range of very popular modern typefaces such as DIN and Foco – if you are working from a brand manual you should find most corporate typefaces here. They charge based on pageviews, with higher packages offering access to mockup and desktop fonts (so you can present visual mockups to clients) and access to Typecast bundled in.

image

In use: Ireland.com – Rockwell

See also – prototyping with Fonts.com


Webtype – http://www.webtype.com/

image

In use: Firestone – Interstate


More

Some of the below are free, alternate services (though quality may vary) and type design studios that have created beautiful typefaces that you purchase and serve via a third-party.

What to look for

There’s plenty of options out there for designers and publishers, but the right choice depends on a lot of factors, including pricing, range of typefaces available, how the fonts are provided, and how you’ll be using them.

There’s a lot of work involved in getting a font to work on screen, especially at smaller sizes. For example, *hinting* involves making sure the outline of a font aligns well with the pixels on the screen, so you don’t get blurred edges. Remember that you get what you pay for, and free fonts from Google might not be as lovingly hand-crafted as ones from Hoefler & Frere-Jones.

Pricing

There’s several ways that companies charge for fonts. The most popular way is to charge a regular subscription based on page views.

  • Free – fonts are open source, and you either embed them or link to them. Google web fonts would be the most popular example.
  • Subscription – you pay a regular fee in return for using a font provider’s services.
  • Per font – you pay a licence for use of a font, possibly restricted to a particular domain or client.
  • Per domain – the amount you pay is based on how many sites the fonts are being used.
  • Per pageviews – the more popular your site, the more you pay.
  • Free with desktop – by purchasing a font for print use, you get access to a web font version.
  • Licence from a studio – you purchase a font from the type designer, and they give you access to the web font version, possibly via a third-party like Typekit.

Usage

Here’s a few things to consider when deciding how to use web fonts.

Hosted or self-hosted

Will you be hosting the font yourself, or using a service? Make sure to check the licence to see if you can host yourself.

Scripts or stylesheets

Some providers include fonts with a few lines of javascript, while others use a stylesheet link. 

Desktop usage for designing

Do you need to use your selected typeface in print, or present mockups beforehand? Tools like [Typecast](http://typecast.com/) are a great help, but you may need a provider that has plugins for your design applications.

Plugins for Adobe/Photoshop plugins

Some providers – for example Monotype and SkyFonts – have desktop plugins so you can use web fonts on your desktop, making it easier to present mockups to clients.

ebook usage

Not a licences are the same – some fonts can be used anywhere, while some are just for web use. If you want to embed a font into an ebook, be sure it’s permissible. At the time of writing Typekit will soon allow embedding in epub via Adobe Creative Cloud. H&FJ require an additional licence for ebooks. You’ll most likely be embedding fonts in epub, so an open library like Google Webfonts is a good source, but again, check the licence.

(edit: changed Skydrive to SkyFonts, thanks @itsdavidhughes)

Leave a Reply

Your email address will not be published. Required fields are marked *