By Ros Hodgekiss on 31st August 2010
As much as we all have a discerning eye for typography on the web, the truth is that a lot of folks are very conservative about its application when it comes to designing for email. Hey, I’m included in this category - even after years in the trade, a sprinkle of the Georgia font seemed quite the luxury. So in this post, we’ll look at some interesting font-stacks and examples, then touch on font use in foreign-language campaigns.
The first obvious question is, ‘Can I use the regular mill of web fonts in HTML email?’. Thankfully the answer is a resounding ‘yes’, with the exception of those declared using
@font-face. What’s better, if you check our our guide to CSS in email, you will also see that a lot of text-related CSS is also supported, including the all-important
font-weight and more.
Another point is that declaring a good font-stack is just as important in email, as it is on the web. However, as much as
font-family: Arial, Helvetica, sans-serif; is a safe choice (and a Dreamweaver default), the point of this post is to show you that there are a lot of other nice combinations that you can use, even at small font-sizes. Here are some stand-out examples:
Headings & body copy: ‘Gill Sans’, Corbel, Tahoma, sans-serif
The use of Gill Sans for really small font-sizes may not be to everyone’s taste, but it sure makes an impression. Note that although Gill Sans is not commonly used in email, it is present on almost 92% of Mac machines and is largely present on PCs with Windows XP and later. Corbel is an unusual fallback, however Tahoma is solid, with Windows coverage of over 99%. Another fallback we could suggest adding for the Windows folk is ‘Gill Sans MT’, as it’s pretty much the same as Gill Sans, but more common on PCs.
Headings: Helvetica, ‘Helvetica Neue’, Arial
Body copy: Georgia, ‘Lucida Grande’, ‘Lucida Sans’
I’ve always been a huge fan of matching a serif font for paragraph copy, with a sans-serif heading or vice-versa. Serif fonts in particular just give email designs so much personality. The font stacks used here are very safe, with Georgia being present on 94/99% of Mac and Windows machines respectively. If Helvetica doesn’t work out for the headings, there’s always plain-jane Arial to back it up.
Headings: Georgia, Times New Roman, Times, serif
Body copy: ‘Trebuchet MS’, Helvetica, sans-serif
Talking about personality, here’s another pairing of serif and sans-serif fonts that we can appreciate. Using Trebuchet MS and Helvetica for the body copy instead of Arial (see design) makes a considerable difference. For the benefit of Windows users, they could also consider a font like ‘Segoe UI’ (shipped with Office ‘07) for that ‘Humanist touch’, although at this small font size, it could be considered as splitting hairs…
Really large text: Arial, Helvetica, sans-serif
‘Hit song’ headings: Georgia, ‘Times New Roman’, Times, serif
Finally, here’s two fonts you know and love: Arial and Georgia. I wanted to throw in this example as it shows you how two rather generic fonts can take on a different aspect when really big, or in all-caps. Notice how the differing font-weights are used for emphasis and interest, while line-height has been used for to ensure consistent leading/line spacing.
All these examples have featured fairly common fonts, but how about if you want to add the font of your dreams to the top of the stack? As we’re defining fallback options, it’s more than okay to give any font a shot, as long as you define a common font at the bottom of a stack (or at least a generic font family as last resort). For example,
font-family: Futura, ‘Century Gothic’, AppleGothic, sans-serif; is most likely fine for most folks - whereas Futura may not be the most common font in the world, the Windows and Mac Gothic equivalents are a fairly solid fallback.
We also tested how long-winded a font-stack can be. Except in the case of Lotus Notes 6 & 7 which allow for a maximum of 5 fallback options, all the other major email clients allow you to add fonts to the stack to a seemingly indefinite length. We gave up trying to break our test campaign after adding up to 25 fallback fonts to the stack!
The good news is that most popular web fonts contain a lot of the characters required to send email newsletters that don’t use the Latin alphabet (we use UTF-8 encoding, by the way). However, thanks to our friends at Email Marketing Voodoo, we’ve been told that ‘Arial Unicode MS’ works best for Chinese campaigns… And most certainly, a lot of other languages, too. Of course, there are a lot of very exotic font-stacks for regional campaigns (like:
font-family: “メイリオ”, “Meiryo”, “ＭＳ Ｐゴシック”, sans-serif;), but for the most part, folks will still use and read Verdana, Arial et al.
Well, hopefully I’ve inspired at least some of you to try the less-generic font-stack combinations out there. If you’re still curious, I recommend you check out this gorgeous roundup of popular fonts on Mac and Windows and this thoughtful post on creating better font-stacks. There’s also this sweet table of common Windows/Mac font equivalents for you to enjoy!
Using a less-than-regular set of fonts can not only make your email stand out from the rest, but potentially convey your message with greater expression. We’d love to know some of your combinations, so feel free to share some of your favorite font stacks below!
Sign up for free.
Then send campaigns for as little as $9/month