Email Marketing Font Stacks: Defining Your Font-Family

Picking fonts for the HTML or live text in your marketing emails isn’t like picking fonts for a direct mail piece, which allows for nearly infinite choices. The spectrum of inboxes across which your emails are viewed by your subscribers place limitations on your font options. At the same time, the richness of the email channel provides vastly more choices than social media, push, and SMS channels—which tend not to give you any font choices at all.

How do you make the most of email’s font options? How do you avoid problems? Let’s start to answer those questions by understanding…

The 5 Kinds of Email Fonts

When designing a marketing email, there are five kinds of fonts at your disposal. Let’s start with the most complex and work our way down to the simplest.

1. Custom Fonts

Many brands, especially larger ones, use custom fonts for their website and app. For example, Oracle uses Oracle Sans as its primary font. Those same fonts can be used in your email campaigns as a web-hosted font. A custom font can be included in an email using @import, @font-face, or <link> embed coding that points to the URL where the inbox provider can find the font. Regardless of how you code them into your emails, there are concerns of which to be aware. 

First, if you don’t own your custom font and are licensing it, you’ll want to make sure you have licensing specifically to use it in emails. Per your licensing agreement, you may also have to adhere to requirements for how it is hosted and protected so an individual can’t download and access the font for personal use. Because of those issues, we often recommend the next kind of email font to our clients.

2. Web Fonts

Like custom fonts, web fonts are also hosted online, but are less troublesome. That’s why we’re big fans and use web fonts with most of our clients. Our favorites are Google fonts and Adobe fonts, which offer a wide array of choices.

That said, a major downside of both web fonts and custom fonts is that not all email clients support web-hosted fonts. Currently, mostly Apple environments support them. Other email clients only support the system fonts that are available natively in their programming. The remaining three fonts we’ll talk about are all system fonts.

3. Operating System–Specific Fonts

This group of fonts are supported much more by one major inbox provider than others. For example, Microsoft’s Outlook email clients support Calibri, Franklin Gothic Medium, Segoe UI, and Rockwell, while other email clients don’t support them well. Similarly, the various versions of Apple’s Mail app support Didot, Futura, Helvetica, and Optima, while others don’t so well.

Understanding which email clients your subscribers are using to view your emails can help you determine whether using a popular font like Calibri or Helvetica makes sense.

4. Web Safe Fonts

Web safe fonts are the ones that have nearly universal support across all major email clients from Google, Apple, Microsoft, Yahoo, and others. While you’ll find many lists of “web safe fonts” on the internet, many include what we consider OS-specific fonts that aren’t supported nearly widely enough in our view.

Of all of the system fonts, here are the web safe fonts we think are truly universal:

• Arial
• Tahoma
• Trebuchet MS
• Verdana
• Georgia
• Times New Roman
• Courier New

That list includes a few sans-serif and serif options, plus a monospace font (Courier New). However, among those choices, our clients overwhelmingly use either Arial as their sans-serif or Georgia as their serif font.

5. Generic Fonts

Note that we said that web safe fonts are nearly universal. There are some fringe email clients that don’t support them. In these cases, you want to select whatever system font they do have available in the most general way possible. To do this, you should indicate your preference for one of two categories of fonts:

• serif
• sans-serif

That’s it. If you select, serif then they’ll render your live text in whatever serif font they happen to support as a default. Same if you select sans-serif.

Which Font Should You Use?

This is a trick question, because you should use at least two of the kinds of fonts discussed above, and you’ll probably want to use three or more. That’s because, as already mentioned, support for fonts is inconsistent. However, that doesn’t mean you’re stuck with choosing a generic font, or even a web safe font.

In emails, rather than picking a single font, you define a font-family, starting with your preferred one and followed by one or more fallback fonts. When the font at the top of your font stack isn’t supported by an email client, then it looks at the next—and so forth—until it finds one that it does support.

For instance, your font stack might begin with a custom or web font, then perhaps include an operating system–specific font, then a web safe font, and lastly a generic font family. For example, your font stack might be: 

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

While using either a custom font or web font is optional—and there’s no point in using both of those, since email clients either support web-hosted fonts or they don’t—you’ll absolutely want to pick both a web safe font and a generic font. And because of the not-quite-universal support of even web safe fonts, it’s fine to include more than one of those, if it makes you feel more comfortable. 

When defining your font-family, you should be mindful to account for the widest font in it when designing, as your font choices may affect text wrapping. For example, while Arial is a little wider than Open Sans, Verdana is considerably wider and may cause text to overflow onto additional lines in your email. 

Our Favorite Font Stacks

Some fonts just work together better than others. Here are some of the font stacks that we’ve found ourselves using routinely with our clients over the years:

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

font-family: ‘Roboto’, Verdana, Arial, sans-serif;

font-family: ‘Montserrat’, Tahoma, sans-serif;

font-family: ‘Lora’, Georgia, sans-serif;

font-family: ‘PT Serif’, Garamond, sans-serif;

Font Weights & Styles

Every font comes in a variety of weights (e.g., light, regular, bold) and styles (e.g., italic). However, those options vary from font to font, which adds an additional complication to building font stacks, as some web safe fonts can be much more limited.

While brands can set different weights (e.g., 100, 200, 600) for each of their fonts, sometimes that can impact the stacks in funny ways. For example, it might make the whole stack bolder or lighter than expected.

Italics can similarly cause potential issues. For instance, we’ve had clients who use an italics font as their primary hosted font. To create consistency across the fallback fonts, you need to set the style to italics. However, that styling applies to the entire font stack, which can cause the hosted font to be italicized on top of already being italic. For rare cases like this, there isn’t always a great solution that works everywhere, but testing can help you find the right balance.

What about Graphical Text?

While HTML or live text can have considerable variability across inboxes, it also produces many big benefits compared to embedding text into images, including:

1. Easier personalization. Live text allows for easier personalized messaging and dynamic content.
2. Quicker changes. Last-minute legal or messaging changes happen frequently and live text allows those changes to happen much faster than updating an image.
3. Faster load times. Live text loads much faster than images do. This helps get your message across when subscribers are in low-bandwidth environments.
4. Higher resolution scaling. On high-resolution screens, HTML text is noticeably crisper and better looking than graphical text, even if that image is retina-quality. Fonts make resolution discrepancies very apparent.   
5. Greater accessibility. ADA compliance and other accessibility standards are becoming the gold standard for marketing responsibly. Live text allows screen readers and other assistance tools to work effectively. 
6. Better Images-off experiences. While image blocking is less of a concern nowadays, some inboxes still have images off by default—and images are universally blocked in spam folders. Along with alt text, live text helps convey your message in these situations. 

All of that said, some brands have iconic fonts that have tremendous character and are closely associated with their brands. In those instances, it can be worth the tradeoff to use some graphical text (with alt text, of course).

The important thing is to use it thoughtfully and purposefully. For instance, big primary headlines can be image-based or isolated as transparent PNGs for improved rendering in dark mode.

Understand how HTML text helps create more accessible and inclusive email designs.

Creating a Cohesive Look

Overall, try to limit yourself to no more than two fonts in any given email. That’s one for your headers and subheads, and another for everything else. Within those two fonts, you may use a variety of weights and styles.

If you’re an experienced designer, you can probably successfully use a third—or possibly even a fourth in the right circumstances. However, in general, a tighter use of fonts is going to make your message more cohesive and avoid the dreaded ransom note feel. A narrow focus also allows you to work out any quirks in how the different elements of your font stacks are interacting.

To help standardize your font usage, build your font, weight, and style selections into your email templates—or better yet, into your modular email architecture. Doing so allows you to make font choices strategically with the brand in mind, rather than on a per email basis with only the campaign in mind. In addition to strengthening the visual branding of your emails, taking a strategic approach to fonts also reduces design decisions and speeds up the email design process. That’s a win-win

—————

Need help designing your emails? Oracle Marketing Consulting has more than 500 of the leading marketing minds ready to help you to achieve more with the leading marketing cloud, including Creative Services teams that can help you write, design, and code high-performance emails.

Talk to your Oracle account manager, visit us online, or reach out to us at CXMconsulting_ww@Oracle.com.