3 Design Tips to Make Email Fonts Stand Out

Ever wondered why a font doesn’t render in your email campaign? It’s likely because it isn’t a “safe” font and the email client or device where you opened the email didn’t support it. In this article we’re going to look at email safe fonts and provide you with a few email design best practices on how to better use fonts in¬†your email campaigns.

Indeed, one of the most important design elements in your emails is written text. The style, arrangement and appearance of text is called typography. When used correctly,¬†typography can make your emails shine. However, there is a complication: not all fonts render in all inboxes and on all devices. Let’s take a moment to understand what the limitations are.

Web-safe fonts: what they are and how to use other fonts

There are a¬†handful of fonts that will render correctly virtually anywhere, regardless of where the email is read. They are called¬†“web-safe” fonts¬† and they include:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

 

Since they render anywhere, they can safely be used in your email campaigns. The drawback is that such a small selection of fonts can limit your design choices.

What can email designers do? Fortunately, there are ways around this limitation:

  1. As we’ll discuss in more detail below, well-designed emails still manage to use typography in clever ways by leveraging text, images, padding, and more.
  2. You can move beyond¬†“web-safe” fonts by tapping into other fonts. A popular approach is to use fonts that are¬†downloaded at the time the message is opened – such as Google web fonts. In order to account for devices that don’t support a specific font, Cascading Style Sheets are used to create “font stacks“, i.e. lists of fonts that allow the device to fallback to another, more widely supported font.
  3. Luckily for us, when designing emails with the¬†BEE editor¬†you don’t have to worry about building a font stack. Simply choose the font we want to use, and BEE will automatically include a list of fallback fonts in the message. By the way, a number of new fonts were recently added to the editor, including Open sans by Google.

ScreenShot1589

For a more detailed explanation of the difference between web-safe fonts, web fonts, and more, please see using web-safe fonts in the BEE editor.

Now, let’s get back to email design and the use of typography in your messages. Here are three design tips to consider when choosing and styling your email fonts.

Tip #1: Choose the right body font

In an article called “Your E-mail Font Is Ruining Your Life,” Bloomberg reported last year that popular fonts like Arial and Helvetica may not actually be ideal for on-the-go inbox reading. Why? Because the forms of some letters‚ÄĒlike p, b, q, d‚ÄĒare too uniform, making them more difficult to distinguish from each other. “You want a font where the letter forms are not ambiguous,” advised typographer¬†Gerry Leonidas, as in¬†a serif font where added strokes give character to individual letters. Here’s a reminder of the difference between serifs and sans serifs:

serif and sans serif email fonts

Image from w3schools.com

So what are recommended alternatives for Arial or Helvetica in email? Georgia or Verdana.

“For e-mails, we generally scan a couple of paragraphs,” the article states. “Having letters with wide, consistent spacing is most important for quick reading… A¬†serif font will also make it easier to distinguish between letters.”

In our inbox, we found a few good examples of serifs in action. The global educational company General Assembly, for instance, typically uses Georgia for body text, seen here in the main description paragraph:

General Assembly email fonts

Dunhill, a British menswear brand, also favors the Georgia font:

Dunhill email fonts

Yet another example from The Kitchn, the cooking and recipe site, shows Georgia is favored:

The Kitchn email fonts

But we saw plenty of sans serifs in use for body text, too. Often, sans serifs were chosen for shorter blocks of text (1 or 2 lines) and larger text, like this example from the curated Amazon site, Canopy:
Canopy Amazon curation site email fonts

The high-end athleisure clothing and gear brand, Lululemon, is also a fan of sans serif font:

Lululemon email fonts

Takeaway

In general, brands should choose a serif font for body text in emails with longer blocks of text. In particular, email fonts like Georgia and Verdana will make text easier for readers to scan. But for emails where there are short, simple bursts of text, it’s better to choose a sans serif email font.

Tip #2: Distinguish headers with a paired font or styling

Headers establish structure, breaking up sections of text and content modules¬†in email. They also make your messages easier to scan and quicker to comprehend.¬†There are a few ways in which brands format typical headers so they stand out and improve an email’s readability:

a) Use the same body text email font but in a larger size (and/or with different color and styling, like bold or all caps)

Using the same font for both the header and body¬†gives emails a sense of design simplicity and clarity. As long as headers are easy to distinguish from body text by changing the size, padding, and/or styling, having¬†one font¬†can strengthen a brand’s visual identity and guarantee that content and formatting will show up from one email client to the next.

Canopy, The Kitchn, and Lululemon all take the large font approach with their headers. The best practice for headers¬†include ones that are at¬†least 2x the size of body text, with padding between the header and the adjacent content blocks to improve readability. Look to the simple “Price drops” header in the Canopy email for a good example.

b)¬†Choose a font¬†that’s different from the¬†body text (and/or a different color and styling, like bold or all caps)

For brands choosing a serif font for the body text, a sans serif font for the header provides a nice visual contrast. “By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface,” reports Smashing Magazine. “This is a classic combination, and it‚Äôs almost impossible to get wrong.” The key is to not choose two fonts with a lot of “personality” or unique characteristics that could conflict with each other. In general, web safe fonts are not ornate, so it’s easy to pair almost any serif with a sans serif.

Web safe serifs include:

  • Courier
  • Georgia
  • Times New Roman

Web safe sans serifs include:

  • Arial
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet
  • Verdana

Even when there’s a change in font between body and header text, the header should still be formatted to at least twice the size of the body text, in addition to potential formatting changes, like color or bold treatment. General Assembly’s email, from above, is a great example of Arial in¬†the header and Georgia in the body text.

c) Using a non-web safe font? Use it in an image, such as for the text of your logo.

Often, brands use headers and logo as an opportunity to showcase their own brand style in an email. Their typography design can be so unique that they choose to include their font choices as an image and not as text. In these cases it’s perfectly fine to use an image as our extravagant font choice wont render perfectly in every email client. Of course, images are subject to the same hazards of other image-based design elements and may be disabled by default in some of our subscribers’ inboxes. But it’s a risk some brands¬†take, depending on the existing plain text content of their emails and their readership. This example from Sight Unseen, the online design magazine, uses an image with branded sans serif for a header:

Sight Unseen email fonts

Takeaway

Establish your brand identity (and maintain great design!) by simply using your brand logo and font at the start of your message, then switching to a web safe font for remaining headers and sections of your email.

Tip #3: Get clever with link formatting

One benefit of including plenty of images in email is that each image can be linked. That way, readers can tap almost anywhere within a message to go to a landing page to browse, explore, and purchase.¬†Brands choosing to use more fonts instead of images can keep up with the “tappability” of their email with smart linking. Links don’t need to be cobalt blue and underlined! There are ways to make hyperlinked text stand out: they could be formatted to the brand color, you could skip the underline, or you could choose not to add much formatting at all.

Lululemon followed these steps when putting together its Crafting Beauty module below.¬†The header, descriptive text, and CTA button are all linked, so readers can tap almost anywhere in the module to get more information. Even though the text doesn’t look linked, an instinctive click or tap will take readers to the Lululemon website. It’s a smart tactic that doesn’t threaten the sleek, simple design with distracting underlines or new colors.

Lululemon email fonts

Takeaway

In your own emails, experiment with formatting links to find a balance that works for your brand and for its aesthetic. Just make sure to keep your email links as visually simple and streamlined as possible.

Wrap up: Best practices for email fonts

  1. Use a web-safe font for the body text in your email. If your emails are text heavy, try a serif.
  2. Format headers so they stand out. Make them much larger than body text, and try a sans serif.
  3. Maximize the effectiveness of links by linking as much text as you can without compromising design.

Feeling inspired? Design your next email message in our easy-to-use, drag-n-drop BEE editor. No HTML knowledge is required, plus your email will be mobile responsive. Sign-up for a BEE Pro free trial!

Save

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor