A fresh look at fonts in email design

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 line-height, 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

{title}

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.

A classical look: Pulse8

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…

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”, “MS Pゴシック”, 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!

Posted by Ros Hodgekiss

3 Comments

  • Ben
    1st September

    Surely it gets tricky to test and ensure if one font is used over another that the email doesn’t break. In the examples above there is plenty of room for the text to ‘breathe’ or make.

    I can see having a massive choice of fonts a great option to revive a tired restricted medium, but if one font is slightly larger than the other - then what would have nicely fitted over 2 lines may now be over 3 for example. If the design is tight and not got much room for expansion then this would be a nightmare.

  • David
    1st September

    If you just want to use Helvetica/Arial I’m 99% certain that simply specifying sans-serif as the typeface will automatically default to Helvetica on Mac and Arial on Windows. Which works out well since Helvetica looks crappy on most Windows machines.

    So, instead of writing: “font-family: Helvetica, Arial, sans-serif” you could simply write “font-family: sans-serif”.

  • Bryan Quilty
    1st September

    I usually only use Arial / Helvetica, but I’m going to try to incorporate other fonts such as Gill Sans and Corbel into future sends. Thanks for the shout out, too!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account