Best Fonts for Email: Usage Tips and Tricks

Oksana Zhylka

Best Fonts for Email: Usage Tips and Tricks

4.2 (83.33%) 24 votes

Best Fonts for Email: Usage Tips and Tricks

June 26, 2017 | 15,202 views

One of the most striking concerns in email creation process is choosing the font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but the most crucial thing is to choose the font which is easy to read, all other font features are minor.

Watch our short video about fonts, its types, web-safe fonts, and how to apply festive ones with Stripo. And what is most important – how to choose the right font for your email templates:

There are two options you have while choosing a font for your email. The first option is about choosing a web safe font which is a font that is standard and included by default on most OS and which is used in most email clients.

Here is the list of top 10 web safe fonts that you may use with 100% guarantee that they will be viewed by anyone in a way as you did:

1. Arial
2. Helvetica
3. Times New Roman
4. Verdana
5. Courier / Courier New
6. Tahoma
7. Georgia
8. Palatino
9. Trebuchet MS
10. Geneva

The next option is to include a web font but there are many risks that it will not be shown properly because the email client doesn’t support this font. In the last case, the web font will be drawn back to a default font.  

Here is the list of default fonts for the most popular email clients:

• iCloud Mail uses Helvetica as a default font.
• Gmail adopts Arial.
• Microsoft Outlook of the oldest versions often uses Calibri.
• Outlook 2007/2010/2013 has a Times New Roman as a fallback font.

How to choose email font properly?

If you rely only on your personal opinion, there is a risk that no one shares your thoughts about the best font ever and your message will look like a message from the past or will be as much user-friendly as people in public transport early in the morning.

If you use too many fonts it seems very complicated in the best case and annoying in the worst one. Choose only one or two fonts for one email. In a perfect case, that’s enough to use only one font but use different sizes: one to highlight the header and another one for the rest content.

Actually, there are only two options for choosing a font. You may choose a web-safe font and be sure that it will be the same for everyone or add a web font and rely on that everyone uses those email clients that support them which is almost impossible, because Gmail, Yahoo Mail and Outlook 2007/10/13/16 don’t support web fonts and, honestly, more or less than iPhone and iPad users may see them. So we don’t recommend to use web fonts in order not to harm the user experience.

The main feature of your content’s font as was mentioned above is readability. What could be added? One more important feature which is a part of readability is legibility. It’s not exactly the same. In one font some characters may be legible and some not. Of course, the legible text is better and faster to read so pay attention if all characters are visible, clear and distinctive.

The experiment about fonts readability was provided by Norbert Schwarz and Hyunjin Song in 2010. The results there impressive. You spend almost twice longer time to read decorative font than default and easy to read one:

Which One to Choose a Serif or a Sans Serif Font?

One more point is to choose between serif and sans serif fonts. What’s the difference between them?

Serif fonts could be defined as fonts that have a small line in the end of every character. The most popular serif fonts are Times New Roman and Georgia.

Sans serif fonts are those that don’t have a decorative line in the end of every symbol. The most popular sans serif safe fonts are Arial, Trebuchet MS and Helvetica.

During the investigation I have found several sources there was claimed that serif fonts are most suitable for emails but I think that is totally lying. Based on the assumption that emails are being observed only online using the desktop or mobile screen, the best are sans serif fonts. It’s easier to read sans serif characters from the screen.

One more interesting fact is that the article at Beefree email design blog which recommends using serif fonts for content heavy emails uses sans serif as a blog font:

So why didn’t they use a serif for blog articles if it is so perfect? I think that it’s a proof that a sans serif is better because the same rule works as for web pages as for emails. Use a serif only for headers and subheaders if necessary.

Font Size

If you are changing the font, make sure that the one you have picked up doesn’t look smaller than previous. Often different fonts have different symbol height so the same 14px font will be different due to chosen font family.

The best practice is to use 14px and higher fonts for desktop users and 16px for those who use mobile devices. If you use a responsive template, make sure that the characters size will be automatically increased for mobile email version.  

I have made an email template at Stripo which allows comparing different dimensions of the same fonts. Here are results:

As a result, the 16px fonts looks awesome. I would rather use it for both desktops and mobile devices.

Spacing

It’s crucial to make spaces between paragraphs as well as between text lines. Pay attention if your font has enough spaces between lines. The most widely used line height varies from 22px to 24px. In other words, the perfect line pitch for emails is used to be 1,5em which is 24 in pixels.

One more thing is to pay attention to spaces between characters. There is no decisive opinion which is better to use: the narrow space font or the wide one.

Georgia and Times New Roman provide too narrow spaces between characters so it influences readability greatly. In my mind, good distance between characters has Courier font as well as Courier New. Maybe, that’s why the last two fonts are so popular in 2017.

Use spaces between the email elements. If there is an image in an email, make sure that you have spaces before and after the picture, that improves readability greatly. Of course, it’s better to align centre such graphical elements as pictures.

Here is an example where the spaces were disregarded:

Could you imagine that it’s only one paragraph from the email which contains more than 1500 words? It’s obvious that you should better say less than more.

Here is one more in addition:

This one is even worse because the font is grey which leads to bad visibility, the font is too small and, of course, I have no comments about spaces.  Yes, they exist but that won’t help. The sentences are too long.

Links & Buttons

Don’t use a separate font to underline the links. Don’t ever put links without anchor text. The text on anchor should explain where this link leads to and be organically a part of the text. Don’t use words “here” or “link” as an anchor text. They are too short and too general to be interested in.

Buttons are the same links but they have a more interactive form for users. It’s better to use both in your email. If you give a link to read an article make it a text link and if you give a link to try out the product you have, just use buttons.

One of the best practices is to make links the same colour as a logo. It looks great, check it out:

There is no exact rule about the colour for buttons that should be used but it’s better to rely on colour psychology and try not to ruin the design concept with too loud colour reproduction.

There are two fonts that suit better for buttons: Georgia and Verdana. It’s cool to use Georgia for heading and subheadings too. It looks great! Actually, the only thing that you should check before sending an email is how text’s colour matches button’s background and make sure that it is visible enough for reading. Check also if the text is located properly on the button, it shouldn’t cross the button’s edges.

Here is an example where button looks cool:

Here is an example where buttons and links are overused:

Text on Banners

Here is the change to use proprietary, web, script, handwritten or decorative fonts that you shouldn’t actually use as the main text font. In case the text on a banner is a part of a picture you may do anything.

The main thing you should care about while creating an email banner is highlighting the brand identity. You may use any font but it’s better to choose the readable one. Don’t write too much text on a banner. There are should be only you welcome words that arouse the interest and motivate users to keep reading.

Here are two cool examples. The one is with clear and simple fonts:

One more banner which adopts decorative font:

Which one to adopt for inspiration and own email design is only your choice.

Colours

The only rule you should follow is to use colours only to showcase the brand identity. If you have an idea to make a colourful text, just leave aside this point of view because it will make text unreadable.

Usually, there are only 3 colours may be used in email. The one is for marking up the header, the next one for rest text and the blue one is for making the links visible. That’s all! You may even reduce this amount to two colours while making the header the same colour but emphasising it with different size or font.

If you want to underline one sentence or a phrase just use a bold font, using the different colour is ambiguous. Commonly for email content, designers use black or dark grey colours. It’s better for readability. The only exception is when you have a black background. In this case, use a white font. Don’t use a light grey font because it’s hard to read through the different contrast range settings.

HTML Tags for Text Formatting

Usually, web-safe fonts are declared in a CSS layout, so it will be not just simple HTML already but there are several HTML tags for text formatting, I hope that everyone had known it before but, nevertheless, here they are:

• <strong> </strong> or <b> </b> – for using a bold font;
• for making the dotted list in email use this structure:

    <ul>
         <li>first statement</li>
         <li>second statement</li>
         <li>third statement</li>
    </ul>

• <i> </i> or <em> <em> – for using cursive to emphasize the text;
• <small> </small> – for adding a small text of the same font as you use;
• <mark> </mark> – to highlight the text with yellow(by default) filling;
• <del> </del> – to mark that some text that was deleted but not replaced;
• <p> </p> – allows you to define a paragraph;

Best Practices for Web Safe Fonts Implementation

Due to many experiments made by the eSputnik marketing team, the best fonts for emails are Arial and Tahoma. Arial is the most compelling font among those who set up email marketing campaign. Tahoma looks great in both content heavy emails and small texts.

I have created an email template at Stripo editor with the same text and the same size 18px for each font. There are no Palatino and Geneva at Stripo email editor but there are custom fonts like Roboto and Open Sans that are default not at all but at most OS but it’s better to define a fallback font in case you use them.

So, here are results, just compare these fonts and choose the one that fits all your needs the most:

As you can see Georgia and Times New Roman are too narrow. Courier New is wide but maybe even too wide for email. Arial is lighter than Helvetica. It’s impossible to tell apart Verdana and Tahoma fonts. Georgia and Verdana look bad when printed. As for me, I would rather choose the last two fonts for my email campaign. Which one do you prefer? Don’t hesitate to leave comments and share this article if you like it.