Emails are as important as your website. Arguably, even more important.

Yet, it’s relatively easy to make your website look great but not so easy with emails.

Developing websites or apps, you can use any of the thousands of webfonts. With email, you have a very limited choice. About 8 standard system fonts, that’s it.

You can use webfonts in emails too, but you have to be very careful, and also plan for when these fonts are not available.

In reality, for email you create for two experiences: one for those who will be able to see your fancy fonts, and one for those who will be able to see only the version with one of those 8 fonts. And it has to be consistent and look good.

First, a quick primer about fonts. Here’s the list of the font families:

The main difference between serif and sans-serif fonts is that serif fonts have little feet and tails. “Sans” means without so I guess “serif” means “feet and tails” then.

Here’s how it looks in reality:

How many different fonts to use in your emails?

Less is sometimes more. Don’t use more than three different fonts for your emails. Aim to produce organized, clear email design. Two is even better.

If you’re going to use two fonts, take font pairing into account. The best choice is to have one for headlines and one for the rest of your content.

Two good-looking fonts will not necessarily look good together 💔. It’s a hard knock life for their love life. Pair them carefully.

Luckily, when using Google Fonts, if you go to the font’s dedicated page, Google tells you which font works well with your chosen one. It makes your life easier.

Colors

If you choose to use different colors, be aware of how it could affect the readers. Don’t confuse them with a color-content mismatch. Even if a reader won’t be able to pinpoint the problem, they will something is off. And you never want that to happen.

Here’s a helpful cheat sheet:

Alignment

If you want to play with text alignment, do it only with headlines or section titles. Don’t mess with the content.

The text should always be left-aligned. Clarity and familiarity is what you want.

Spacing

Line spacing matters. A lot.

Different typefaces require different line spacing. Make sure the lines are not too tight neither too loose. Use a 1.4 – 1.5 times bigger size for your line height to ensure great readability.

See the difference?

The example in the middle is easy to read whereas the one on the left is too crowded and the right one is too loose. Find the golden middle way.

Whitespace

Leverage it.

Whitespace is the area that surrounds your copy in your email. It helps you highlight the copy itself so it can attract attention. You can play with setting the margin and padding and see how your email could be more appealing.

It’s also important to strike a fine balance on mobile, with limited space. You want to give the text some space to breathe, but you also have to remember that it needs to be easy to read. Too much whitespace and suddenly you have 3-4 words per line, and it reads like a haiku. Not what you want. Unless it’s a weekly haiku newsletter, which in all likelihood it’s not.

Links

Using images or buttons is a stylish way to link to URLs. It’s also easier for readers to tap on the images or buttons on the mobile devices, so there is a higher chance to get people to your website.

If you decide to place URLs within your copy, you can use bold fonts or your brand’s color to highlight hyperlinks.

Quick guide to web fonts in email

Different email clients, such as Outlook, Windows or Apple use different default settings. It means that if you use fancy letters, it might be impossible to present them to your recipients. They won’t render on the readers’ screens.

Email clients that support web fonts:

• Android email app
• Apple Mail
• iOS Mail
• Outlook 2000
• Outlook.com app
• AOL Mail

Note the absence of Gmail, sadly. It used to support them, but not anymore.

Standard fonts

So-called web-safe fonts. Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet, Verdana, are the default email fonts. They are safe to use because they are installed on almost every device.

How to use web fonts

CSS. That’s how you use them 🙂

You can self-host the web font and refer to it in your css part of your email, or you can link to the one hosted by Google or any other provider.

Here’s the sample code:

Many more code examples and different web fonts can be found in the article.

Default email font settings

Gmail uses Arial. However, Chrome doesn’t support Arial, it changes to Helvetica. Apple mail uses Helvetica.

The question is why these fonts are used if they are not a sensible choice?

The answer lies in the technology. These fonts rendered well on the low-resolution computer screens. The technology evolved and now we can use cleaner characters. For some mysterious reasons, we have to keep using these old fonts in emails.

What is the best font size for newsletters?

Studies show that Helvetica and Arial are bad for emails.

The most common typefaces for newsletters are Times New Roman, Verdana, Arial and Tahoma. (Although I hate Times New Roman, please don’t use it.)

These are safe choices to make and can be used for any purpose.

Tips to use email fonts

• Be consistent
• Don’t use too small fonts
• Too big fonts aren’t hot either
• Avoid customized fonts that no one else uses on this Earth, except you
• Inappropriate fonts too (try not to send business emails in Comic Sans. Or ANY emails, for that matter.)

Conclusion

Using web fonts in your emails is beneficial even if not every recipient sees the result. You can leverage technology so you can be consistent in terms of branding.

The most important take away is that if you choose to use web fonts, always make sure you set web safe fall back options – which will appear properly on devices that don’t support modern fonts.

 

How to Choose the Best Font for Your Next Email Design