If we’ve learned anything as email designers over the past few years, it’s that image-based emails are unreliable at best and lead to frustration, anger, and unsubscribes at their worst. As recent studies show, upwards of 43% of subscribers have images disabled. While styled ALT text can mitigate some issues, the only bulletproof method of getting your message across to subscribers is to use real text in the HTML of your campaigns.
The Ultimate Guide to Web Fonts in Email
Since the writing of this post, we’ve taken a deeper dive into typography. Historically, choosing the right font for your email has never been too hard, considering the limited number of web safe fonts to choose from. But recently, things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have been using for years—implementing web fonts in their emails. Here’s your ultimate guide to web fonts in email.
If you’ve relied on image-based emails for too long (hey, they used to be the de facto solution for most companies), then you may not know of the latest advances in typography for email. No longer are we tied to using Arial and Times New Roman, and web fonts are just scratching the surface of what’s possible. In this post, we’ll take a look at the basics of email typography and pick up some handy tips from designer Paul Airy on pushing text to the limits in our designs.
Typography Basics
A lot of email design is about ensuring that email apps and rendering engines don’t do weird things to our campaigns. When it comes to text, most issues can be resolved by including some boilerplate styles on every bit of copy. In our own emails, we subscribe to the <td> or GTFO methodology, so nearly all of our styles are applied at the table cell level.
<td>Some copy goes here.</td>On that table cell, we recommend including the following CSS styles, adjusted to your preferences: color, font-family, font-size, font-weight, and line-height.
<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>When declared, these styles will keep your text rendering well in even the most hostile email apps. And, if we keep each piece of content in its own table cell, we can easily style those components however we want without having to worry about inheritance issues. When we want to target a specific chunk of text within a larger block, we can wrap that text in a span and use inline styles:
<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here. <span style=”font-weight: bold; font-style: italic;”>Calling attention to content</span> using font styles is a great way to get your message across.</td>While we’re using Arial in the examples above (I know, I know… ), you can go beyond these basic fonts–at least in some clients. Let’s see how.
Using Web Fonts
Back in August, we held our second annual Email Design Conference. One of our favorite talks was ‘HTML Typography in Email’ from designer Paul Airy. Throughout the talk, Paul went deep into some more advanced aspects of typography and their support in email.
Put simply, web fonts allow us to use fonts that are not installed on a user’s machine by including them in our CSS. While web font solutions have been around for years and are very popular on the web, their acceptance in email design tools is a recent development.
There are a few different methods for including web fonts, but Paul recommends linking out to an external stylesheet to pull in fonts from a web fonts provider like Google Web Fonts.
<head>
<link rel="noopener" target="_blank" href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>Then, in our inline styles, we can add the font to our font-family declaration:
<td style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>Now, for email clients that support web fonts, our text will be displayed using our prefered typeface. And, for all other email clients, the text will fall back to our alternative fonts, in this case Helvetica, Arial, or a generic sans serif.
Web Font Support in Email Clients using <link> | |
Apple Mail 6 |  |
Lotus Notes 8 | |
Outlook 2000 | |
Outlook 2011 on Mac | |
Thunderbird | |
iPad | |
iPhone | |
Android 2.3 | |
Android 4.2 | |
Unfortunately, Outlook won’t fall back to our alternative fonts (no surprise there!). Instead, it will ignore our font stack and display text using Times New Roman. Fortunately, we can account for this behavior by using a CSS class to target the text and then use conditional comments to feed Outlook an alternate font stack that it will actually use.
<!--[if mso]>
<style type=”text/css”>
.body-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<td class=”body-text” style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>
Now, instead of Times New Roman, our campaign will default to Arial or another installed sans serif, keeping our design intact, if a little generic.
 | Preview your email in popular clients and devicesSee how email clients display your fonts and fix issues before you send with Litmus Email Previews. |
Multiple Columns Without Table Cells
One of my favorite parts of Paul’s talk was when he decried the options for having multiple columns in which text can flow in an email. Since all of our emails are table-based, which naturally have columns, the typical solution is to just use adjacent table cells for multiple columns. But, what if we want to have our text flow between two columns within one table cell instead of hard-coding the content into separate cells?
The solution is to use a newer CSS property called column-count. Be warned: we’re in Wild West territory here–column-count has very limited support across email clients (or on the web, for that matter). However, it’s an elegant solution that falls back gracefully in email clients that lack support.
Using column-count, we can specify the number of columns we want our text split into and have the rendering engine figure out the gory details for us. Including it on our table cell is easy:
<td style=”-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>Now, no matter how much content we dump in there, it will flow naturally between the two columns. And, when unsupported, column-count falls back to a single-column layout. Like we mentioned before, support isn’t the best.
Multiple Column Support in Email Clients using column-count | |
Apple Mail 6 | |
Outlook 2011 on Mac | |
AOL Mail (Explorer) | |
AOL Mail (Chrome) | |
iPad | |
iPhone | |
Android 2.3 | |
Android 4.2 | |
This is one instance where applying your styles to a paragraph tag actually works to your advantage. In Paul’s testing, he found that by using column-count on a paragraph, both AOL Mail and Outlook.com in Firefox worked, on top of the previously mentioned email clients.
Paul actually puts this technique to use in his own email newsletter, Type E.
Scratching the Surface
These are just a few examples of how you can enhance the type in your campaigns. Paul goes over a few other goodies during his talk including line breaks in ALT text, using drop caps, and some amazing tips for choosing solid fallback fonts. We’re sure that you can think of even more creative techniques for making your text look amazing.
TEST TYPOGRAPHY IN YOUR CAMPAIGNS
Inspired to take your type game to the next level? Just be sure to test your campaigns before sending them out. Try Litmus free and make sure your typography looks amazing in popular email clients, including desktop, webmail, and mobile devices.
Jason Rodriguez was the Community & Product Evangelist at Litmus
