When developing and designing emails, the font you pick defines the look & feel of your email. It provides a point of recognition for your recipient, makes your emails unique. Choosing a good font is therefore of great importance. In this article, we’re helping you pick the right font for your (transactional) emails.

When thinking of fonts, there are some that will immediately pop into your head. The basics: Arial, Calibri, Times New Roman if you’re over 20. Comic Sans is hard to forget either, but not for the reason of it being a standard font. However, in the infinite universe of the Internet, you can find more than 800,000 fonts for free or commercial use. In my honest opinion: that’s a lot.

‘The thing’ with fonts in email

The problem with fonts, however, is that you cannot just randomly select one and expect it to work everywhere. Besides the fact that you need a license to use some fonts, email is a major font blocker. On your website you can pretty much use every font that you have the rights to. That’s not the case with email. The biggest factor? Inboxes. Or, as far as the technical terms go, email clients.

Because you cannot just get any font you like and put it in an email, that often means the font you use on your website has to be replaced in email. For us, for example, that is Montserrat. Montserrat isn’t supported by the majority of email clients. To make sure our emails are still ‘on brand’, we took the following steps (and so can you):

  1. Choosing the font, you secretly want to always show
  2. Pick a font that you know can always be displayed;
  3. Make sure that your email templates know what you want to display.

Your brand, your style, your font

An important aspect of a brand’s style guide is their font. It basically determines how recognizable their marketing efforts are. Some brands go as far as to create their own font – that no one else is allowed to use (commercially). Disney and New York Times are great examples of brands that are recognized by their fonts. Even though it is not the exact same font, this image shows you what I mean:

1. Start with your the font you would like to work everywhere.

Assuming you’re not using a font that you developed yourself, there’s are a bunch of well-known Font collections available. If you haven’t defined your brands ‘unique’ font yet, you can get one you like here:

From this list, Google Fonts is your safest bet. It might not have the font you dreamed of, but they tend to work quite well for Gmail inboxes (I wonder why). Later on when we’re diving into how to add fonts to an email template, you’ll see that Google (fonts API) is the default option.

If you were to choose a font from a commercial vendor, it is a good idea to consult their EULA (End User License Agreement) on the use of fonts in your emails. You wouldn’t want to get sued over a bunch of letters, would you?

Remember that your ‘unique’ font probably only shows in a small share of your emails. The next step: Pick a font that looks similar, but is websafe.

2. A font that is highly likely to show

Email is not the most popular medium for font fanatics. Only a few fonts are supported by all email clients, and unsupported fonts are replaced with a standard (fallback) font. By default, Apple Mail replaces your font with Helvetica, Gmail falls back on Arial and Microsoft Outlook replaces your precious font with Calibri or even worse: Times New Roman. Therefore, you should always have a backup plan. Because maybe Gmail supports your nicely rounded font, but your Outlook recipients see your texts in Times New Roman.

To solve this problem, you use so-called “fallback” fonts: fonts that are not your favorite font, but look alike and work in any client. Where you choose a web font for your own style, you choose a websafe font for your fallback. There are three types of websafe fonts:

Websafe fonts with serif (serif)

Fonts with serifs are fonts whose letters have a so-called ‘serif’, an angular end. Well-known examples of websafe fonts with serifs are Georgia, Rockwell, and Times New Roman.

Websafe fonts without a serif (sans-serif)

Sans-serif fonts are fonts of which theletters are rounded. Examples are Arial, Helvetica, and Verdana.

Websafe monospace fonts

Monospace fonts are characterized by the space that is the same for each letter. In contrast to other fonts, where the letters are each given proportional space. An example of a monospace font is Courier New.

Again, even selecting a websafe font doesn’t mean it will always show. Keep an eye on the support per (email client). An over view of websafe fonts and their support by Windows & Mac can be found here.

A best practice for selecting a fallback font is to go with the basics: Arial, Helvetica, Verdana, Georgia, or Times New Roman. These are supported by most email clients and will therefore be displayed 99,9% of the times your unique font doesn’t show.

3. To serif or not to serif, that’s the question

When you’re selecting a ‘unique’ and a fallback font, the thing they probably have in common is the serif or the absence of it. This “common denominator” is important for the final part of using fonts in email. In email HTML/CSS you define your font-families in chronological order:

H1, H2, H3, p |font-family: ‘Montserrat’, Arial

This tells the email client to first check if they can display your favorite font. If they can’t, they go on to the next one – your fallback font. If they cannot display that font either, what are they going to do? Display their default font again. By simply adding ‘serif’ or ‘sans-serif’ to the font families, you assert the last possible bit of power on how your emails display:

H1, H2, H3, p |font-family: ‘Montserrat’, Arial, sans-serif

It gives the email client the instruction to, whatever the circumstances, only display a sans-serif font when everything else fails.

Using fonts in your e-mails

With a style guide for email fonts in your pocket, the next step is to apply those fonts to all your different emails. That includes the transactional emails you send from your webshop, CRM, accounting software, ticket system, et cetera. To manually select fonts for each sending system will provide you enough tasks for a full week of work, so our suggestion -of course- is to collect all your email sources in one platform where you trigger a template. Coincidentally, SendPro provides such a platform.

The freedom of using your fonts

Generally, WYSIWYG template editors have a default defined set of fonts that you can use as a sender. However, more advanced template editors also allow you to retrieve the fonts you chose in the steps we described before. Add them to your emails through either the <link>, @import, or @font-face method.

The <link> method

The <link> method is supported by almost all clients and platforms. If you have chosen a font from a previously mentioned font service, it provides you with an href value (http://…). This allows an email client to retrieve your font from that location. For the font family Montserrat, you would place this line of code in the <head> of your email:

<link href=”https://fonts.googleapis.com/css2?family=Montserrat&display=swap” rel=”stylesheet”>

The @import method

Like the <link> method, @import is fairly simple to use. It’s put in the <style> element of your email and looks like this when Montserrat is your font-family:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

The @font-face method

With font-face, you retrieve the font directly from the source file to be used directly in the styling of your emails. It also gives you more options (or restrictions, depending on how you look at it). It can help you limit the font-weights and styles to be used in your emails:

<style type="text/css">
@media screen {
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src:local('Montserrat'), local('Montserrat'), url('../fonts/montserrat-v24-latin-regular.woff')format('woff');
 }
}
</style>

On the outlook for Outlook

We mentioned Times New Roman before, Microsoft Outlook’s default font. That only scraped the first layer of Outlook’s quirks, as it also doesn’t support the methods used above. For your Outlook-using recipients, you have to include an extra piece of code in your template:

<!--[if mso]>
<style type="text/css">
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->‍

Summarized: 

The Fonts Issue

Contrary to the web, using fonts in email is very limited. To still get as close to your brand’s style as possible, here’s what you have to do:

  • Define a font stack that works for you, e.g., “font-family: ‘Montserrat’, Arial, sans-serif”;
  • Add them to your email CSS via the <link>, @import, or @font-face method;
  • Create a workaround for Microsoft Outlook recipients.