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
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?
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.
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.
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.
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.
See also – prototyping with Fonts.com
Webtype – http://www.webtype.com/
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.
- FontShop – http://www.fontshop.com/fonts/webfonts/
- Fontsquirrel – http://www.fontsquirrel.com/ – mostly free fonts (check the licence) that you download and host yourself.
- Fontspring – http://www.fontspring.com/web-fonts
- Google Webfonts – http://www.google.com/fonts/ – free fonts, hosted and simple to add via a CSS stylesheet.
- Process Type Foundry – http://processtypefoundry.com
- Type Together – http://www.type-together.com/
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.
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.
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
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.
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)