Web Safe Fonts – Displaying Text in Email

Published by

Web Safe fonts for Email | Emailcenter

There are many different fonts out there these days and typography is an art in itself. Your own branding may even use a very specific type of font, but alas, it cannot be used everywhere if it’s not ‘web safe’. Hopefully this article will help you to understand what web safe fonts are and how they affect email.

What Is a Web Safe Font?

This is a font that is universally recognised across the web. When a web page loads, the browser receives a command to generate text onto the screen using a specific font. This comes from the users computer, so if they haven’t got that font installed then it won’t be displayed. Instead, a default font will be loaded in its place, which may look atrocious.

“But I have many fonts on my computer” I hear you say. Well, did you know that different operating systems, such as Windows and Mac OS, use different sets of fonts? Only a select few overlap and it’s because of this that they are considered safe as everyone will be able to see it without risk.

What Fonts are Used?

The following fonts are web safe for the two main operating systems – Windows and Mac OS. To ensure emails sent from Maxemail are displayed correctly, we’ve programmed these fonts into our email builder.

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

However, to be truly universal and cover all operating systems, such as Linux, there are only five main fonts that are used:

  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Verdana

These are your web safe fonts. It wont matter what computer or electronic device the user is using, the font will all look exactly the same.

What if a Font Fails?

If you’re not using a web safe font and haven’t got a fall back it will most likely go to the email clients default font.

As an example, these are the default fonts for some of the most popular email clients:

  • Apple Mail = Helvetica
  • Gmail = Arial
  • Microsoft Outlook = Calibri

Can I Have a Fall Back Font?

You may have heard of font families; this is when you have fall back options. Many designers use the Helvetica font, but will settle for Arial as they are reasonably similar and considered to be sans-serif fonts. The code would look like this:

{font-family: Helvetica, Arial, sans-serif}

This means the browser will run through the computer first checking for Helvetica, but if the computer doesn’t have it it will use Arial instead, and so on. It’s a good fall back if you are trying to be more specific with your fonts.

If you want to know more about font families, I would recommended W3 Schools as a good resource to learn about CSS web safe fonts.

What If I Really Want To Use That Font?

You could add a font as an image to your email, but you’re opening yourself up to a few issues here. Some people disable images or they may fail to load, so the user may not see it. Plus, if your image is large it could slow the loading of the email.

Why Do Websites Support More Fonts Than Email?

A website will support fonts that are not installed by default in a browser because the font is embedded into the website itself.

Currently very few web fonts are supported by email clients and you risk text being shown in a default font if you don’t use one that’s web safe. To embed a new font in an email you could use @font-face and @import in the css code, but this is only supported by Apple Mail and a few others. It’s because of this we still highly recommended you to use web safe fonts.

Maybe in the future more fonts will be available and supported by all email clients, but until such time just play it safe. For now, follow good email marketing practice and use a web safe font to ensure that your email is readable.

Will Maxemail Support my Custom Font?

Currently the answer to this is no. If it’s not web safe there’s a chance your email won’t render correctly, so we encourage Maxemail users to use web safe fonts only. All web safe fonts suitable for the major operating systems (listed above) are included in our email builder.

About Nicola Lush

UX/ UI and Graphic Designer at Emailcenter.