Best Fonts for Email: Usage Tips and Tricks

Oksana Zhylka

Best Fonts for Email: Usage Tips and Tricks

4.2 (84.62%) 26 votes

Best Fonts for Email: Usage Tips and Tricks

August 28, 2018 | 47,734 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 when choosing the best font for email 2018. 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
Designed in 1982, is packaged with all versions of Microsoft, starting from the Windows 3, and Apple Mac OS X. Displayed by all email clients. Due to terminal diagonal cuts, looks less mechanical compared to other fonts of the sans-serif family.

2. Helvetica
A sans-serif typeface, one of the most used fonts of a type, has rounded letters and wide capitals. Designed in 1957

3. Times New Roman
Has tall low-case letters, slightly condensed, short descenders and ascenders. Commissioned by “The Times” in 1931.

4. Verdana
Was designed to be readable on low-resolution screens, its main feature is tall and wide low-case characters.

5. Courier / Courier New
Was designed in 1955, similar to Times New Roman, but adjusted to be a monospaced font. Courier New has heavier dots and commas than the original Courier. Courier is the standard font used for screenwriting in the film industry.

6. Tahoma
Similar to Verdana yet has narrower letters, small counters and tight letter spacing. Used as the default screen font for Windows 95, 2000, and XP versions.

7. Georgia
Has tall lower-case, strokers are thicker than average ones, its numerals blend seamlessly with text due to its similar size.

8. Palatino
Was originally designed for headings, advertisements, and printing. Wider than other old-style serif fonts.

9. Trebuchet MS
Has shortened tails for some letters, in bold its letters are rather pointy than rounded, and rounded dots in lowercase. Released in 1996.

10. Geneva
A redesigned version of Helvetica, its main distinction is that is has a basic set of ligatures.

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 using 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 at 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 email font is use 14px and higher 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 with Stripo which allows comparing different dimensions of the same fonts. Here are the 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 center such graphical elements as pictures.

Here is an example where the spaces were disregarded:

Could you imagine that it’s only one paragraph of the email that 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 the 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 color as a logo. It looks great, check it out:

There is no exact rule about the color for buttons that should be used but it’s better to rely on color psychology and try not to ruin the design concept with too loud color 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 color matches the 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 the 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.

Colors

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

Usually, there are only 3 colors 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 colors while making the header the same color but emphasizing it with different size or font.

If you want to underline one sentence or a phrase just use a bold font, using the different color is ambiguous. Commonly for email content, designers use black or dark grey colors. 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 campaigns. Tahoma looks great in both content heavy emails and small texts.

I have created an email template with 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:

Don’t waste your time looking for the best font for Gmail, the best font for Outlook and any other email client. Because email clients replace the unknown fonts with the fallback ones. And like we said above, Gmail uses Arial, Outlook replaces unknown fonts with Time New Roman, and Mac OS X uses typeface Helvetica.

Wrap up

Notwithstanding all above, we can say there is no professional email font and size that is legible and looks nice on all kinds of devices. You always have to choose:

➢ 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.

To my mind, those two latter are the best email fonts for business newsletters, yet they look bad when printed. As for me, I would rather choose the last two fonts for my email templates. Which one do you prefer? Don’t hesitate to leave comments on Facebook and share this article if you like it.