Choosing the right fonts for your website

Choosing the right fonts to represent your business is a key part of your branding, both online and offline. For leaflets, business cards, posters or any other offline material, it's easy — pick a font, print it and you are done. Online, things can be more complex, and it is worth ensuring your fonts will work online before you finalise your font choices.
It is also important to choose fonts that match the feel of your business — are you aiming to portray a fresh and modern persona, a well established and formal look or something else? Picking the right fonts is a large part of how your business is perceived by others.
Most websites use two to three fonts — one for body (i.e. normal paragraph text), one for headings, and one for the logo. Sometimes the headings and logo are the same, and sometimes the headings and body are the same. It works best if these fonts are picked to work together, and are used on all documents produced by the business — the website, any other advertising including posters and leaflets, business cards and any formal documentation or letters that are written. The body text is usually a clear easy to read relatively boring font, whereas headers and logos can be more fancy. Often very fancy fonts are matched with simpler ones in order to keep things easy to read.

Choosing cross platform fonts

There are only a small number of fonts that are available on Windows, Apple's OS X, iOS (running on iPhones, iPads and iPods), Android and Linux. Microsoft released a core set of web fonts between 1996 and 2002 which can be assumed to be on any system. If they aren't, there are usually some very similar fonts to be used instead — many Linux installations don't include these, but do include similar open source clones. These core web fonts are:

Font name	A sample using fonts on your computer/device
Andale Mono	“The quick & brown fox jumped over the lazy dog!”
Arial	“The quick & brown fox jumped over the lazy dog!”
Arial Black	“The quick & brown fox jumped over the lazy dog!”
Comic Sans MS	“The quick & brown fox jumped over the lazy dog”
Courier New	“The quick & brown fox jumped over the lazy dog!”
Georgia	“The quick & brown fox jumped over the lazy dog!”
Impact	“The quick & brown fox jumped over the lazy dog!”
Times New Roman	“The quick & brown fox jumped over the lazy dog”
Trebuchet MS	“The quick & brown fox jumped over the lazy dog!”
Verdana	“The quick & brown fox jumped over the lazy dog!”
Webdings	“The quick & brown fox jumped over the lazy dog!”

You'll likely notice a few things straight away — of these fonts, the monospaced ones (Andale Mono and Courier New) aren't really appropriate for logos or body text. Comic Sans MS is very pixelly at small sizes, and is very over used (see the Ban Comic Sans web site!). Webdings is designed to provide symbols for signs and things, so isn't that useful either. Impact looks really horrible at small sizes, leaving us with only 6 versatile fonts that we can rely on. These are the two serif fonts, Georgia and Times New Roman, and the four sans-serif fonts, Arial, Arial Black, Trebuchet MS and Verdana.
In 2007, Microsoft released their "C" fonts — Calibri, Cambria, Candara, Consolas, Constantia, Corbel. Though these are quite common on Windows computers (they shipped with Windows Vista and Windows 7, and are included in Windows 8), elsewhere they are unusual. They aren't included on iOS or Android, are only on Macs that have bought Microsoft Office 2011 and are only on Linux machines where the user has copied them from a Windows installation. Hence we can't really use those fonts either.
Coming from the other side, many well known fonts that are installed on Macs and iOS are very rarely available on Windows: Helvetica, Futura, Gill Sans, Optima, Baskerville and many others are on a negligible number of Windows machines.
This means that if you have picked any font other than the six above, without using the techniques below, your website won't look the same on different operating systems.

Fallback fonts

For areas of the website where it isn't critical that the font is the same across different computers (most body text falls into this category), fallback fonts can be used. For instance, Helvetica and Arial are very similar, so the site can be built so that if the user doesn't have Helvetica the text is drawn using Arial instead. Calibri could be used, with a fallback to Trebuchet MS. This works well, but can cause problems as each typeface isn't exactly the same size — the letters can be higher as well as wider, so text might not flow in the same way. For longer sections of text this can mean the text takes up a significantly different area. This does let us use fonts such as Adobe Garamond Pro that are expensive and only come bundled with high end software if the user has them, while dropping down to more common fonts for users without.
This is usually referred to as a font stack. The web designer simply provides a list of fonts with their preferences first. This font stack can contain as many fonts are as required, so it is possible to use a fallback for a fallback for a fallback if needed!
For headers and logos, this often isn't ideal as most businesses don't expect that their logo will look different across different computers, which leads us onto the two ways to get unusual fonts to work online…

Ensuring Consistency - Option 1: Using images of text

The traditional way to do this is to simply make an image of the text. Although this is quick and easy, and guarantees it looks the same everywhere, there are a number of problems with this method, making it only really appropriate for logos. In no particular order, the problems with using images of text are:

• The text can't easily be changed afterwards, and is hence unsuitable for text that can be edited, for instance titles of blog posts or product names on a database driven site.
• When the user zooms in, the image will look pixelly and grainy - this isn't good for touch screen devices where people frequently zoom in, or for people with poor vision who may zoom in to help them read the text.
• The image can have a much larger file size than the font - particularly if the text is big. This causes the website to load more slowly.
• People can't select the text, meaning they can't easily look words up in a dictionary (double tap with three fingers on most Macs), or easily quote your text on Facebook or Twitter. Some users also highlight text to help them keep their place while reading longer sections. Safari also offers a "Reader" feature that extracts the text and lays it out in an easy to read fashion - features like this can only work on real text.
• Google and other search engines can't read this text, meaning that any thing it says won't be indexed and searchable. This is very bad for SEO. There are a variety of techniques to try to get Google to index this text, but they all involve typing the text, hence making the user download it twice - once as an image and once as text!

Ensuring Consistency - Option 2: Embedding fonts

Thankfully, within the last few years every browser now supports a technology known as @font-face. This allows us to embed fonts into the webpage, allowing us to use a much wider range. The downside is that when a font is embedded any user can download the font and use it. This means that only fonts that have an open license can be embedded. Fortunately, there are many font foundries producing free fonts that are often of very high quality. Picking a font that allows embedding is very sensible as we can then guarantee that it will look the same on all computers, making sure your online text matches your offline text. Because less people are using these fonts (though that is starting to change!) it also means your business will be able to have a unique look, which can often add a subtle professional feel to your design.
Google have helpfully provided a website that catalogues many of the best fonts that can be used in this way. It can be found at Google's webfont directory, and is definitely worth looking through before settling on a logo design. There are over 500 fonts available here, and the number is increasing all the time. We would recommend that you use a font from this website where ever possible to guarantee things can look the same across all of your marketing.

A selection of different ways to style the same text — all have a very different feel. The fonts come from Google's font directory, and have been embedded in this page. Click on the text and type to change it.

Embedding fonts allows you to get the best of both worlds - consistency across different platforms, whilst also using interesting and defining fonts. We have used font embedding in almost every website we have designed - here are some interesting examples where we feel that the design would not have worked without using this technology.

Case studies

Alison Philps

For Alison's site, we wanted to create a welcoming, feminine classy feeling, reminiscent of the design of glossy wedding magazines. To do this, we picked a very readable, yet distinct font for the body - Droid Sans, produced by Google for their Android range of phones. This font was designed to be read on screen, and is hence heavily optimised for this use case. It is modern and clean without being distracting.
For the headings and the logo at the top we picked Prata, an interesting serif font. Rather than opting for either Times New Roman (too reminiscent of writing essays at college!) or Georgia, Prata provides a clear identity, particularly with it's calligraphic ampersand (&). It's lowercase letters are nice and high, giving the rounded letters lots of open space which makes it clear and easy to read.

Waterside Network Group

The Waterside Network Group use the Screengem font in their existing leaflets - it's a fun and quirky font that we wanted to incorporate into the design. We used it for the text on the sliders, as well as their phone number and the speech bubble from the bee. We paired this with Ubuntu a font designed for all the menus and dialog boxes for the popular Linux distribution with the same name. This font was commissioned to provide Ubuntu with a modern, clean and easy to read interface, so it seems clear that it would work for the body text on a website.

Hi-Q Building Services

When we designed the website for Hi-Q Building Services we wanted to ensure that the keywords describing what they do were very clear. The text in the top left is real text, styled using Crimson Text. This means that those keywords are readable by search engines, as well as giving visitors a quick idea of what they do.
For this website, their logo on the right is also using real text, again, helping to ensure the words "Building Services" and "Plumbing & Heating Specialists" are both in the first few phrases on the page.

Summary

Without embedding fonts, there are only six fonts that you can guarantee will be available. While you can provide fallback fonts so that things can look as good as possible, this often isn't an ideal solution. Choosing a font that allows embedding in websites (often referred to as @font-face) before getting anything printed is a great idea to ensure consistency.
At Focal Strategy, we always think carefully about which fonts to use, whilst ensuring that the site loads quickly and has its content available to search engines.
Do you have an example of a site that has particularly good font usage? Perhaps you know of other sources of fonts that can be embedded? Feel free to share in the comments below!

(http://www.focalstrategy.com/blog/1288/Choosing-the-right-fonts-for-your-website)