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.
Proceed with caution. Web fonts aren't supported widely, so use a suitable fallback. While the percentage of subscribers using email clients that can display web fonts is rising, it's very important to provide a widely-used backup font that's similar in appearance.
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|
|Web-based email clients||@font-face support||@import support|
|Mobile email clients||@font-face support||@import support|
|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.
We decided to test a variety of popular web font services - here's what we found.
For a more in-depth look at web font compatibility, we recommend reading StyleCampaign's article, Web font services for email.
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:
In addition, here is a shortlist of other vendors and foundries that are worth a try.
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.
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.