For the latest results, visit the our page on “Web Fonts” in the “Will it work?” section of our site.
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.
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. 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.
So, why wouldn’t a savvy designer take advantage of the tools available? Some of the best in the business do so.
How should you serve your fonts?
But there’s a new kid on the web font services block: Cloud.typography from H&FJ. We were excited to see if the new service would work for both email and web sites. While we were at it, we decided to review a few other options – here’s what we found:
- Google Web Fonts: a solid option with a slightly lower quality of fonts
- Fontdeck: another good service, but one that allows the fonts to be served via CSS as well as JS
- Cloud.typography: despite the use of CSS to serve the fonts, the new offering from H&FJ does not currently work with HTML email. So with broken hearts, we’ll continue to look for a good alternative!
- Self-hosted: Hosting your own fonts is also a solid option. For example, you could source fonts from Lost Type Co-op, host them yourself, then use @import in your campaigns? After all, the designers behind Lost Type have created some fantastic fonts that really could put on a shine on your email
Now we’ve looked at a few options, let’s take a look at a sample campaign. Here’s The Weekly Review, a newsletter for design-minded folks. In this demo, @font-face is used to serve a couple of nice typographic options. The following image shows the three fonts that all of our iOS and Apple Mail readers can see, being Avenir, Brandon Grotesque and Facit:
Readers using Android Mail or Thunderbird will also see Brandon Grotesque and Facit, as served via the @font-face declaration. However, as Avenir was not served via @font-face, it won’t be seen in these clients. Nonetheless, it was chosen as a good third font option for the article titles; being a system font for OS X and iOS, it’s also reliable font stack choice for Apple devices. All other readers will see Facit in its place.
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.
Will you use web fonts?
As we’ve postulated in the past, branding restrictions aside, there is nothing holding you back from taking advantage of better typography in 2013. Even in email!
With good fonts freely available and just as good fallbacks for less sophisticated email clients, using web fonts to better reflect your branding or to provide a more visually pleasing look and feel to your emails is a no-brainer. So, we’d love to hear from you – are you ready to put @font-face and/or @import to work in your campaigns? Chime in on the comments and let us know!