Tel: 01865 242425

Tel: 1-855-835-0471

Tel: 1300 993 579

What you need to know about using fonts in email

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. We had a few questions about fonts in email in our recent email design webinar ‘Email Marketing Meets Design Theory’, 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, but a table cell is preferable because it allows you to change the color for AOL mail.  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:

Fonts in email using CSS

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.

Fonts in email - size

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:

Fonts in email bold

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:

Fonts in email italic

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.


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.

As promised, here’s the full list of safe fonts:

  • Arial, Helvetica, sans-serif
  • ‘Arial Black’, Gadget, sans-serif
  • ‘Bookman Old Style’, serif
  • ‘Comic Sans MS’, cursive
  • Courier, monospace
  • ‘Courier New’, Courier, monospace
  • Garamond, serif
  • Georgia, serif
  • Impact, Charcoal, sans-serif
  • ‘Lucida Console’, Monaco, monospace
  • ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif
  • ‘MS Sans Serif’, Geneva, sans-serif;
  • font-family: ‘MS Serif’, ‘New York’, sans-serif;
  • ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  • Symbol, sans-serif
  • Tahoma, Geneva, sans-serif
  • ‘Times New Roman’, Times, serif
  • ‘Trebuchet MS’, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif
  • Webdings, sans-serif
  • Wingdings, ‘Zapf Dingbats’, sans-serif


Tags: , ,

  • Excellent article Paul.

    Email formatting is definitely something that should be left to the professionals. As you point out, there are so many variables to consider when building an email template — getting it wrong can have a very negative impact on your message.

    • Paul Dyke

      Thanks David. I’m glad you found it interesting.

  • Ahmed Shahin

    Very helpful article but Paul do you think that there are ways to enforce email clients to show the fonts rather than images? Thanks

    • Guest

      Hi Ahmed. I don’t think it is possible to insert code to enforce email clients to show or block images – this setting controlled by the recipient. If you can build your email using HTML based text and avoid images for text, your recipients will be able to see the fonts if they have set images to be off.

    • Paul Dyke

      Hi Ahmed. I don’t think it is possible to insert code to enforce email clients to show or block images – this setting controlled by the recipient. If you can build your email using HTML based text and avoid images for text, your recipients will be able to see the fonts if they have set images to be off.

  • robfunk

    I am using this method, but Outlook is changing the fonts back to Times New Roman, the default font.

    • Paul Dyke

      Hi robfunk – I’m presuming you’re using nested tables? For Outlook, you need to declare the font in the table or table cell surrounding the text you want to style. The font isn’t inherited from any styling you put on outer tables. This might be the reason why it is returning to Times New Roman. Let me know how you get on.

      • ghz

        Hi Paul two years later the same problem but in outlook for IOS. The problem is only there. Any ideas? thanks!

        • Paul Dyke

          Hi ghz. That’s interesting. I wasn’t aware of any issues with fonts when using an Outlook App for iPhone but it’s not something I use. We use Litmus to test our code, but they don’t currently have this as a screenshot. Have you included IOS system font such as Helvetica?

        • Giovanni

          Try to remove apexes / quotation marks.
          For example
          Write font-family: Helvetica Neue, Trebuchet MS, Arial, sans-serif;
          instead of font-family ‘Helvetica Neue’, ‘Trebuchet MS’, Arial, sans-serif.

  • Philip McGeehan

    Hi Paul
    Thanks for your article. You say that Helvetica is a safe font, but it isn’t installed on my companies PCs by default; we’ve had to purchase licences to publish PDFs and printed materials.
    What happens if we send emails in Helvetica and the recipient doesn’t have it?

    • Rob Pellow

      Hi Philip! A great question; the best thing to do with fonts is to specify more than one so that you can control how users without your 1st choice of font will see your text. In this case, you want people to see Helvetica and anyone with a Mac or iOS device will, as will anyone who has installed it on their PC. To deal with everyone else you can add more fonts that will be shown in the absence of Helvetica. When you use font-family in your style you can write it like this:

      Helvetica, Arial, sans-serif;

      This means that it will try and format it with Helvetica, if that’s not there then it will use Arial, if that doesn’t exist then it will just use the system default sans-serif font. Clearly you could amend this to be any amount of fonts in any order – the browser will keep trying them from left to right until it finds one it can use.

  • Emily Harris

    As for fonts, I’ve heard that Templatemonster is going to add a new category. It’s very good news, have a look –