How Typography Can Change the Fate of Your Email Campaigns

By in LiveChat Blog > Communication,
typography email campaigns

Here are 3 beautiful emails.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Email-Header.jpg

Can you see the common thread between all the three of them? You’ll notice that all 3 emails have different fonts and the emotions induced by the fonts too are different. While colors play an important role in conveying emotions, Typography too plays a vital role that make or break the fate of your email campaign performance. Wondering how?

Well, before you move forward to understanding Typography in Email, here’s an interesting take on what typography comprises of.

Different Components of Typography

Typography is the art and technique of arranging text in such a way that the written words are legible, readable, and appealing. In case of emails, legibility is the ability of the reader to identify individual characters in a large paragraph in the email and readability is the ease with which the reader can sift through the email copy. To make a paragraph both legible and readable, you need to take care of certain factors:

Font Family: A font family is a set of fonts wherein each character has an individual style and structure. As you can see in the below example, the character ‘a’ looks entirely different from each other when written in two different fonts. Choosing the correct font for your email determines the legibility of the text.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Font-Size.jpg

Font Size: The size of font in the text is known as the font size. In the digital domain it is measured in pixels (px) and in physical world it is measured in points (pt). In this modern world, any email that you read is minimum 1 ft away from your eyes – be it desktop, tablet or mobile device. So, one of the best practices is to maintain a 14-16pt email copy font size.

Line lengths & Spacing: Line length is the number of minimum words per line of a paragraph. This greatly affects the reading speed. As you can see in the example below, longer the line length, more time it takes the eye to return to the beginning of the next line and this can tire the readers’ eyes. With shorter line length the reading speed increases but at the cost of the overall length of the paragraph and the space it shall take. This is especially important when you view an email in a mobile device.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Line-Spacing.jpg

Line spacing is the space between two lines. It is calculated as the distance between the descender of the character ‘g’ or ‘y’ of the upper line from the mid-point of the next line. Ideally the line spacing in an email needs to be one and half times the font size. i.e. for a text of 16pts the line spacing needs to be 24pts.

Kerning: The spacing between two characters of a word is called the kerning. This is a really important factor when choosing serif fonts (explained later) for your email.

Font Weight: The text written in two different fonts belonging to same font family will also look different as you can observe below.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Font-Weight.jpg

That is because each font has individual font weight. Font weight is nothing but the thickness of the stroke needed to write one character. As the font weight changes, the kerning also changes. You can experiment with different font weights to create emphasis on certain text in the email copy.

Text Alignment: One of the subtlest factors of typography is text alignment. Mostly, left alignment is used for large paragraphs of text and right alignment (rarely used) for breakouts. Center-alignment is mostly used in emails as it is easy for the eyes to scan across.

Unveiling the Types of Fonts Used in Emails

  1. Serif Fonts

Serif fonts are fonts wherein the characters have small flourishes, embellishments or fancy strokes at their end. Owing to the strokes, the reader’s eyes are easily guided through consequent characters and so they can easily read through the email copy. The common fonts belonging to this category are Cambria, Garamond, Georgia, Lucida Bright, Rockwell, Times New Roman, etc.

REI Co-op has used a serif font in the email body copy along with italics for added emphasis.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\you-now-have-40-to-spend-on-marshmallows.png

  1. Sans Serif Fonts

Sans serif fonts, as the name suggests, are devoid of the fancy embellishments and so gives a semi-formal look to the type. Due to ample kerning, the text in sans serif fonts gives an overall clean look even in low resolution displays. So, these fonts dominate on the web as well as in emails. The commonly used fonts in this category are Arial, Calibri, Century Gothic, Impact, Lucida Sans, Tahoma, Verdana, etc.

Harley Davidson, going with their brand personality, used sans serif font to portray a bold message.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\welcome-to-autumn-brand-new-collection-out-now.png

  1. Monospaced

These fonts are inspired by the typewriter font and have uniform spacing between any two characters. They are associated with the administrative and government letters and can add an authoritative look and feel to the email. They are mostly used as a plain text fallback in MultiMIME emails. The most popular font in this category is Courier.

Frank Body is well known to use courier fonts in their emails. Combining a black font color in contrast with the pastel colors brings out the email copy well.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Its-time.png

  1. Calligraphy

The fanciest of all the fonts, calligraphy imitates handwritten letters and have a romantic and personalized feel to it. Widely used in logos and headings in emails, the popular fonts in this category are Sophia, Cursiva, Dancing Script, Euphoria Script, Germanica, Kristi, etc.

Thumbtack combined calligraphy fonts in headlines with sans serif to create an attractive email here.

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\summer-stuff-you-can-do-now-for-less.png

How to Choose the Right Font for Your Emails

The way any font from your email is rendered in the browser/ device/ email client depends on the availability of the font in the end users’ system. Based on the availability, the fonts are classified into email safe fonts and web fonts.

Email-safe Fonts

Email-safe fonts or System fonts are the fonts present in your computer systems and mobile devices by default. Most of the emails, where no fonts are specified are automatically rendered using the default system fonts. The popular web safe fonts are Times New Roman, Arial, Georgia, Verdana, Courier, etc.

Web Fonts

Web fonts are fonts that need to be specially installed or dynamically fetched in order to be rendered. They are specially designed and licensed for use. Although web fonts make the emails attractive, all email clients do not support web fonts, and hence it is necessary to provide an appropriate fallback.

The following code is used to force an email client to display a custom font

<td”fallback-font” style = font-family: ‘Name of the font”> Your text here </td>

In case you are dynamically fetching a custom font, you need to specify the URL in header itself using @import or @font-face CSS property.

Use of Custom Fonts and The Support They Get from Email Clients

Currently only a handful of email clients support custom fonts, viz.

  • Native Android
  • Outlook 2000
  • iOS Mail
  • Outlook.com App
  • AOL Mail
  • Apple Mail
  • Safari Browser

For emails being viewed through other non-supporting email clients, an appropriate fallback needs to be set. The kerning, height and width of the fallback fonts need to match with that of the primary font.

There are three levels of fonts: a primary font, a secondary font, and a fallback font.

  • 1st Level: The primary font, i.e. the custom font
  • 2nd Level: The secondary font, i.e. the fallback web-safe font
  • 3rd Level: The fallback font, i.e. the basic Serif or Sans-serif font

C:\Users\Adithya Menon\Pictures\2017\10 - October\Envato\Fallback-Fonts.jpg

The code for forcing an email client to display a custom font needs to be modified as:

<td”fallback-font” style = font-family: ‘Primary font’, 2nd fallback,

3rd fallback fonts;”> Your text here </td>

This way in case the code in an email is:

<td”fallback-font” style = font-family: ‘Montserrat’, Arial, sans-serif;”> Your text here </td>

The email client shall look for the specified primary font, i.e. Montserrat in the email recipients’ device and move on to render Arial if Montserrat is not available.

Ironically, even though Outlook supports custom fonts, a bug causes the text to be displayed in Times New Roman as fallback (instead of the fallback specified) in case the custom font isn’t available. The workaround is to include the font declaration between a Outlook conditional code:

<!–[if mso]>

<style type=”text/css”>

body, table, td {font-family: Arial, Helvetica, sans-serif !important;}

</style>

<![endif]–>

Key Takeaways

In this world focused on aesthetics working harmoniously with a purpose, a proper typography can be the deciding factor that either MAKES or BREAKS your email design. In a nutshell, keep the following tips in mind:

  • Always choosing the custom font which has a similar looking fallback font. Even better would be to first choose the fallback font and select your custom font based on that.
  • All fonts used in emails, can be categorized into 4 sections and have individual personality:
    • Serif
    • Sans serif
    • Monospaced
    • Calligraphy
  • Typography relies heavily on each character being legible and sentences being readable.
  • Custom fonts are supported in few devices but this should not discourage you from using custom fonts.
  • Outlook tends to override the fallback font and display text in Times New Roman unless put inside Outlook conditional code.

Have you experimented with typography in your emails? We’d love to hear your experiences.

discussion

comments powered by Disqus
Rate us! Rate this chat to help us become better support. +