Foolproof Typography Tips For Email

CSS, Email Design

Designing emails with unique typography can lead to some interesting challenges.  Some email clients, like older versions of Outlook, do not support web-based fonts. This can cause a bit of a headache when testing for for consistency across email clients.

So how do you make compelling looking emails with font styles that match your brand? Here are a few solutions.

Use Widely Supported Fonts

The easiest solution is to find a font family that is widely supported by email clients and web browsers. To use these fonts, extra style definitions are not like the web fonts require. These include fonts such as:

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

Link to Web Based Fonts

You also have the option to link to fonts that are hosted on the web, such as any of the Google Web Fonts. When using a font from Google Fonts, they’ll provide the style necessary for using this font.

opensansThis is an example of the style for the font family called Open Sans, which should be pasted into the <head> of the message.
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Then you’ll need to specify where the font is assigned using a CSS rule like this:

<span style="font-family: 'Open Sans', sans-serif;">Web Font Example</span>

Provide a Fallback Font

For the email clients that do not support web fonts, we highly suggest selecting an appropriate fallback font. This basically means that if the email client does not support the web font, it will show the text in another font that is supported. In this example, the text will show as Open Sans if supported, but if not, it will show as Arial or a generic sans-serif font:
<span style="font-family: 'Open Sans', Arial, sans-serif;">Text here</span>

Work Around for Outlook Bug

Outlook will ignore the web font and also the fallback font for text styled with a web font. Instead, Outlook will render the text using Times New Roman, no matter what font you had specified as a fallback font.

One work around for this issue is to hide the linked stylesheet from emails rendered in Outlook. You can use an Outlook conditional comment to do this, like the following:

<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->

Test It Out

Once you have all the font styles inserted, make sure to send yourself a test email. Once that looks good, go ahead and run an inbox preview in Critical Impact, to see how the message looks in other email clients before making a live send.

…Or Replace the Text with a Picture

If you have a use-case where the font absolutely has to look the exact same in all email clients, you also have the option to save the text as an image. Use Photoshop to save an image or take a screenshot of some text on your website, so that you have an image of the text in the appropriate font family. Then insert this image into a message. Once the images are downloaded, the header will appear in the appropriate font family in all email clients.

In Summary

Adding web fonts to email campaigns can add a layer of design flexibility and spice up your email layout. However, it will take a bit more time and will require testing to get the message looking just right.

Menu