What you need to know about using fonts in email

6 minute read

A more recent version of this blog can be found here.

Fonts are an important part of your visual identity, so naturally you want to use the right ones in your emails. But sometimes it’s not possible. There are many questions about using fonts in email, so I’ve collected some thoughts here.

Which ones are safe to use, why can’t you just use any font you want in emails and if you really must use a specific font, what do you do? Here it is: the ultimate guide to using fonts in email.

A word of warning, some of this will be a bit techie. But you will still be able to understand the main points even if you’re not familiar with HTML and CSS coding.

Why can’t I use any font I want in emails?

Email clients (such as Outlook) can only display fonts that are already installed on your recipients’ computers. They simply won’t recognize a new corporate typeface that you might be using in your printed materials. Microsoft Word will often show a large selection of fonts, but just because you have them installed doesn’t mean everyone else does. To make things more challenging, Apple and Windows computers have completely different fonts installed by default.

Which fonts are safe to use?

When choosing what to use as fonts in email, we need to revert to the lowest denominator: the ones that are commonly installed on most versions of Windows and Apple on first installation. Fortunately, we can list a family of fonts and the email client will display the first one in the list that it can use. So it is usual to have:

1. a windows font
2. a mac font
3. a generic typeface like serif, sans-serif, cursive, fantasy or monospace.

You can find a full list of safe fonts at the end of this blog post, but here are the three most-used sans-serif font types:

Arial, Helvetica, sans-serif
Verdana, Geneva, sans-serif
‘Trebuchet MS’, Helvetica, sans-serif

What about web fonts in email?

Some email clients support @font-face and @import within a stylesheet which allow you to specify any font. Your font needs to be supplied from somewhere and we recommend hosting your own using @import or a provider such as Google Fonts. The problem with this is that the list of email clients that support it is very small:

Apple Mail
iPhone
iPad
Android Mail (native app, not Gmail)
Thunderbird

Using images as an alternative

If you have a particular font that is essential to show, for example in a heading, my advice is to insert it as an image. A major issue with this is that it won’t appear if images are not displayed in a particular inbox and you can’t edit it in the HTML editor. As a back-up, always include an alt tag, and you can also add inline styling on the image to set the size and color of the alt text.

Setting the font using inline CSS

When building templates, email designers will often use inline CSS to determine the font and size. This can be applied to a table or table cell. Again, Outlook might cause a few problems as it doesn’t remember the font of a parent table and Times New Roman is set as default. So if you want something else, the font needs to be mentioned for every nested table, like this:

What about font size?

There are several ways to set font size and different opinions about which is better.

Em is often preferred on the web because it is scalable to the screen size which makes it ideal for building responsive websites. It works by setting a baseline, so if you set it to 100%, it would tell browsers to use their default size (usually 16px). But this doesn’t work with fonts in email as email clients have different default sizes.

Percent is another scalable font unit, similar to em except 100% will always equal the default size.

Point (pt) is sometimes used. One point is equal to 1/72 of an inch. But why use a unit that is a throwback to the printing industry?

In my opinion, pixels are the best option. Email designs are often pixel perfect – lots of sliced images in different table cells that have to appear seamless. Having your text behave in a similar way makes sense. Here’s an example.

Emphasizing text

There are a few ways to emphasize a word or phrase.

If you use the HTML editor, bold <b> tags are inserted around the text. This <b> tag is somewhat depreciated in web design in favor of <strong> but it continues to be used in email. Font weight can also be written as an inline style:

Italic is sometimes used for emphasis and titles of works. The HTML editor will insert an <i> tag around the text you would like to be italicized. If added in your template code as an inline style, your designer may use the following:

Underlines should only be used for hyperlinks as a means of navigation to another document, not for emphasis. It’s very confusing to a reader to have underlined text that isn’t a link!

What about mobile?

You might like to set a large font size for mobile screens. This can be set using media queries. As best practice, a comfortable size for text in email is 14px but you may like to put this up to 16px for mobile.

Conclusion?

Of course you must make a decision according to your priorities, but I’m afraid that at this point email coding is not as adventurous as we would like it to be. Not for now, anyway. So I would advise sticking to the safe fonts in email as much as possible.