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.
Let’s get creative with fonts, already!
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:
Made for Mac: Lavagraphics
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.
Safety first: Charlie Pratt
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.
A classical look: Pulse8
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…
A new look at old fonts: Cabedge
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.
With multiple fallback fonts, can’t we try anything?
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!
So, how about foreign language campaigns?
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!