Using Web Fonts in eDM
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.
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|
|Web-based email clients||Result||Notes|
|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?
We decided to test a variety of popular web font services - here''s what we found.
- 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
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.