in

Typography In Emails: Using The Right Font Face

As the Internet continues to evolve, it is moving on from the limited variety of fonts. Using different fonts enables brands to differentiate themselves from the rest, but here’s the catch: Every email client, device type, and the operating system doesn’t support all the fonts. This has become one of the grey areas for email marketers, and today we will discuss the typography in emails and how to select the right font face.

What Are Web Fonts

While developing an email, the email developers have only two options when it comes to dealing with text: Either to include the text in the images like infographics or to place them in the copy. If the recipient’s email service provider doesn’t support your fonts, they will experience difficulties in viewing your message while the screen readers may skip some of your content. To safeguard against such issues, web fonts are used for email marketing.

Web Safe Fonts

Web safe fonts are the ones that are used by a vast majority of operating systems and device types regardless of country of origin or period of manufacturing. They are installed by default. Arial, Verdana, Georgia, Times New Roman, and Courier are examples of web safe fonts.

Web fonts

The licensed fonts that are widely used across operating systems and device types are known as web fonts. Examples of web fonts include Sans and Roboto families.

Embedding The Web Fonts In Emails

Below I am listing down the main methods of embedding web fonts into HTML email templates. There are three methods of doing so and I am listing them down in the order of increasing utility:

@import

@import url(‘https://fonts.googleapis.com/css?family=Open+Sans’);

Here, we are importing the font family “Open Sans” from its web phone service. You just need to copy and paste the URL from the web hosting service, or in case you are willing to import a self-hosted font, just locate the file where you have stored it. Almost every email client supports this method.

<link>

<link href=”http://fonts.googleapis.com/css?family=Open+Sans” rel=”stylesheet” type=”text/css”>

Unlike the @import method, <link> method is supported by all email clients. You can select a third party hosted font or self-hosted font as href will define the value here. This method is also better for the quick loading of your text.

@font-face

<style type=”text/css”>

@media screen {

@font-face{

font-family:’Open Sans’;

font-style:normal;

font-weight:400;

src:local(‘Open Sans’), local(‘OpenSans’), url(‘http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff’) format(‘woff’);

}

}

</style>

Expert email developers prefer @font-face. Among all web font services, .woff format should be preferred due to its support availability. This is a slightly more advanced method since it allows you complete control over the file format you want to use.

Pro Tip: If you aren’t able to find a font while surfing on Google Chrome, search it on Internet Explorer. (It works better!)

Fallback Fonts And How To Select Them

All email clients have a fallback font set as by default. Arial is for Gmail, Calibri for MS Outlook, and Helvetica is Apple Mail’s default fallback font. You can also prioritize a different fallback font apart from these. You have to select a fallback font that comes from the same font family as your web font. This helps keep your reader experience consistent across various email clients. Keep the x-height same, or else your email will render in disproportionately varying format.

Arial, Georgia, Verdana, Courier New, and Lucida don’t need any fallback fonts. Open Sans, Dosis, Ubuntu, PT Sans, Roboto, Anton, Oswald, Raleway, and Source Sans Pro come from Sans family and use Verdana as Fallback Font 1 and Arial as Fallback Font 2.

Websites For Finding Web Fonts

If you are looking to purchase licensed web fonts here is the list of websites providing them with redistribution included:

Using Licensed Web Fonts For Email

Not many people know that you actually need a license to use web fonts for your emails. While it is totally ok to use them on your websites and even mobile apps, EULA (End User License Agreement) finds it as a violation since it is considered as redistribution. Licensing is based on the number of monthly opens while hosting on your own servers might cost additional charges. You should also consider the file size of your web fonts as they have different file sizes, and using a variety of them may impact the loading speed of your email.

Pairing Web Fonts

Like color contrast, it is necessary to choose the right pair of fonts to maintain design consistency. While you don’t need to choose them from the same family, it is necessary that they shouldn’t defy the aesthetic appeal. You can refer to Font Pair to see which fonts blend well together. You should ensure that font-style, font-variant, color, x-height, font-size in pixels, line-height, text-transform, and letter-spacing fit together for a consistent reading experience.

Over To You

There are two things that I would like to highlight at the end: Keep licensing and design consistency in mind. Have fallback fonts ready and choose them as per your brand. Some lean towards the formal side while others look more cheerful. I hope you find this article on email typography useful in selecting the right font face.

Author Bio

Kevin George is Head of Marketing at Email Uplers, one of the fastest-growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to Email template conversion and Mailchimp Email Templates. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.

This post contains affiliate links. Affiliate disclosure: As an Amazon Associate, we may earn commissions from qualifying purchases from Amazon.com and other Amazon websites.

Written by Kevin George

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.