The fonts you use in your emails are as critical to your design as your selection of images and colours. Here are a few considerations as you choose your fonts.

Not every font is universally supported on every device. It comes down to font support by operating systems and email clients.

There are two broad font categories: web safe fonts and web fonts.

Web safe fonts

Web safe fonts are widely supported by most operating systems. Examples are Arial, Verdana, Georgia, Helvetica or Times New Roman.

These are safe choices but they can be limiting in your design. If consistent display across every email client is mission critical to your brand then you're "stuck" with web safe fonts.

Web fonts

Web fonts are versatile but, unfortunately, not universally supported.

Some examples are Open Sans, Roboto, Lato and Monserrat.

Web fonts need to be added / made available inside individual emails, which is done automatically in the email editor, but despite this not every email client displays them.

The following email clients display web fonts correctly:

  • AOL Mail

  • Native Android mail app (not Gmail app)

  • Apple Mail

  • iOS Mail

  • Outlook 2000

  • app

The good new is that this covers most of the popular email clients. 

A notable exception where web fonts won't work is Outlook 2007/2010/2013.

If a "web font" is not supported a substitute "web safe font" is used, such as Helvetica or Arial.

Technical details

This is an example for developers to use Open Sans in emails with fallback option:

Step 1: import fonts:

<!--[if !mso]><!-->
<link href=",400,700" rel="stylesheet" type="text/css">

Step 2: Apply font to content:

body,p {font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; font-weight: 300;}

Outlook 2007, 2010 and 2013 don't support web fonts and ignores fallback fonts by default. Wrapping the code between the <!--[if !mso]><!-->   <!--<![endif]--> tags at least ensures that fallback fonts do work even though web fonts don't. So in the above example in Outlook 2007/2010/2013 the font will be shown as Arial.

Line height

On desktop view in emails headline spacing may be too "squished" because line heights in paragraphs and headlines are the same. A workaround is to add headlines in their own separate content block where line height can be adjusted separately or instead of using headline formatting use large paragraph style text.

On mobile display, line height automatically changes to preset values to provide the best user experience.

Did this answer your question?