Wednesday, December 2, 2020

How to Choose the Best Fonts for Email Marketing

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

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’s one major complication: Not all fonts render in all inboxes and on all devices.


When used correctly, typography can make your emails shine. However, there’s one major complication: Not all fonts render in all inboxes and on all devices.
Click To Tweet


Today we’re going to take a look at the more technical aspects of email font compatibility and how to use web safe fonts. But first, let’s take a moment to reinforce exactly why fonts are so essential.

Importance of fonts in branding

Choosing the best font for email is extremely important. Just like color, your font choice has a huge impact on how people perceive your message.

Take a look at these two examples. In this message from The North Face, the fonts used are simple, staid and black-and-white. They help the email seem simple and serious. A different font, one that’s more scripted or written in cursive, would give this same email an entirely different feel.

email font compatibility

Here, GoMacro uses simple and readable fonts for the headlines and body copy but throws in some fun typography, too.

typography in email example

Fonts are an integral component of your email that need to be chosen with care. As you pick which fonts are the best fit for your brand and your email campaign, however, you’ll need to consider more than just looks — email font compatibility is essential, too.

Web-safe fonts

There are a handful of fonts that will render correctly just about anywhere, regardless of where the email is read. These fonts are called “web-safe” fonts. They include:

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

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

What can email designers do? Fortunately, there are a few 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” — lists of fonts that allow the device to fall back 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 you want to use and BEE will automatically include a list of fallback fonts in the message.

Create your email
for free!

Customize one of our
200+ mobile-ready templates.
And free your time with our
drag & drop editor!

No signup required

Read more

Here are three design tips to consider when choosing and styling your email fonts.

#1: Choose the right body font

Fonts like Arial and Helvetica are popular. But they might 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 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 are best. We tend to scan through emails, and fonts like these have wide enough spacing that we can catch everything even as we skim.

In our inbox, we found a few good examples of serifs in action. Here’s an email from Pursoma, a wellness company:

serif font in email

We also love this email from Chobani:

best fonts for email

But we saw plenty of sans serifs in use for body text, too. Often, sans serifs were chosen for shorter blocks of text (one or two lines) and larger text, like this plain text email from St. Jude’s Children’s Hospital:

plain text email with simple font

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

sans serif font in email

Takeaway

In general, brands should choose a serif font for body text in emails with longer blocks of text. Email fonts like Georgia and Verdana in particular 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.

#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.

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.

The Lip Bar uses the same font throughout this email, but the headline “Want to be a TLB VIP?” is bolded and a larger size than the rest of the test.

best fonts for email

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. 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 any formatting changes, such as text color or bold treatment. This David’s Bridal email uses two very different fonts for the header and body text, creating a nice visual contrast.

web safe fonts in email

Using a non-web safe font? Use it in an image

Often, brands use headers and logos 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 an extravagant font choice won’t 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 choose to 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.

email header font

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 any remaining headers and sections of your email.

#3: Get clever with link formatting

One benefit of including plenty of images in an 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 other 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.

Social Media Week made the simple yet effective choice to use one of its brand colors for hyperlinks — a pretty coral shade that matches the CTA buttons in the email. It’s a smart tactic that doesn’t threaten the email’s design with distracting underlines or new colors.

best fonts for email

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: Find the best font for email in the BEE email editor

Use the BEE email editor to create stellar marketing emails with web safe fonts. With BEE, it’s easy to pick your font of choice, format headers so they stand out and maximize the effectiveness of links by linking as much text as you like without compromising design. You can also add custom fonts to your BEE Pro account to cement your branding and make your emails even more beautiful and effective. Sign up for a free trial of BEE Pro to start designing today!

Create mobile-ready emails with drag & drop!

Reduce email production time and
export your message to your favorite sending platform.

15 days free trial
No credit card required

Read more

Share this post with your friends! Pin it on Pinterest 📌

two email with text over and a pink background

Updated November 30, 2020.

Save



source https://emaildesign.beefree.io/email-fonts-best-practices/

No comments:

Post a Comment