Typography is one of the foundational tools available to make your content unique and a pleasure to read. And while web typography is improving by leaps and bounds, email typography is less than ideal, constrained by the limits of current email clients.

However, there are a variety of email clients that do support "web fonts", being fonts that are either hosted by a web-based service like Google Fonts , or on your own server. Web fonts can provide a more visually pleasant and accessible experience for email subscribers, not to mention, countless typographic options for designers to work with.

Web font support in email clients

In our testing in late 2012, we found that support for the @font-face rule was still quite lacking - only Apple''s Mail.app and iOS Mail support it. However, @import tends to fare slightly better - along with Apple''s Mail clients, Android Mail and Thunderbird can also make use of any fonts defined therein. As a result, both @font-face and @import does allow you to serve a portion of your readership with improved typography, while gracefully degrading for clients without web font support. Here''s a look at which clients support these CSS rules:

Desktop email clients	@font-face support	@import support
Apple Mail	Yes	Yes
Outlook 2000+	No	Info
Thunderbird	No	Yes
Windows Mail	No	No

Web-based email clients	Result	Notes
AOL Mail	No	No
Gmail	No	No
Outlook.com	No	No

Mobile email clients	Result	Notes
iOS Mail (iPhone/iPad)	Yes	Yes

This may not look promising, but based on the numbers, the portion of people who will get the optimized version is growing all the time - especially if you consider the growth of email readership on mobile devices.

How should you serve your fonts?

Once you''ve decided to make use of @font-face or @import, you have to decide where your fonts are going to be served from. Again, our testing in 2012 showed that Google Web Fonts are the best option available. Due to the lack of JavaScript support in email clients , services such as Typekit are sadly not an option.

We decided to test a variety of popular web font services - here''s what we found.

Web-hosted

Despite the use of CSS to serve the fonts, Cloud.typography , by H&FJ does not currently work with HTML email. Nor does Typekit , which uses JavaScript. However, here are three viable options:

• Fontdeck - a good service that allows fonts to be served via CSS
• Webtype - good selection and also provides CSS samples for their fonts
• Google Web Fonts - another solid option, with a slightly lower quality of fonts

Self-hosted

It''s also possible to host font files yourself, on your own server. Keep in mind that while services like Webtype do offer self-hosted options, their licensing plans are not cheap. Here are affordable alternatives:

• Lost Type Co-op - a collection of fantastic fonts that really could put on a shine on your email. While many font foundries are relatively expensive, Lost Type charges by what you feel like paying, which is unique!
• Process - with many web fonts priced at < $50, this is a great site to browse font files without blowing the budget

In addition, here is a shortlist of other vendors and foundries that are worth a try.

Choosing good fallbacks

Once a service has been chosen and hours have been spent deliberating on just the right font, you can start putting your email design together. The key to providing a good experience for all readers is to ensure that good fallback font choices are made. Keep in mind that you are limited in your choices, as the fallback fonts have to be the safe options that will be available and supported by all email clients on all devices.

Despite the limited options, it''s important that you make choices that match your optimal font configuration as well as possible. For starters, vertical alignment is crucial to good design. Choosing a fallback font that has a similar x-height to your optimal font will ensure that the email you''ve designed doesn''t fall apart vertically when the second (or third) font choice is displayed. In the earlier demo, Facit was chosen as the primary body font for two reasons. First, it''s lovely, plain and simple; it reads well at multiple sizes. But the second reason was that it has a similar x-height to some very safe fallbacks, Helvetica for the Apple crowd and Verdana for Windows users.

The animated GIF here shows the three choices and how well they fit together. Verdana in particular has an overall greater size and spacing, but the height is similar, meaning that the vertical spacing will be fine, no matter what font the email recipient sees.
Another item to keep in mind is choosing fonts that have a similar feel. This ''feel'' can be dictated largely by the terminals , which provide an obvious distinction when comparing serif and sans-serif type. In our demo, the three primary fonts are distinct, but similar in their terminal types.

As shown here, there are slight differences in the terminals and aperture of each letter, but they are each unmodulated, abrupt and the weight matches that of main stroke. As a result, the feel of your newsletter should not change greatly from client to client.

Should you use web fonts?

Unless you are working with branding guidelines that dictate exactly how typography should be used in your email campaigns, there''s nothing stopping you from using the countless free and paid web fonts available. However, you do have to be prepared for these fonts to display in only a select few email clients - which mean that the fallbacks you choose may well be displayed for the majority of your subscribers.