How to choose the best font for your next email design

You must have wondered, at least once: ”Which font should I use in my email?”.

The answer, however, is not that simple.

Email designers create amazing emails by using the right email fonts. Sometimes they borrow web fonts that web developers use. This method allows them to leverage technology and show their creativity.

Initially, web fonts were developed for websites and apps. These fonts can communicate your branding on a website very easily.

Email designers are not so lucky. They are limited because there are only a handful of fonts that display properly in all email clients. But they realized that web fonts could help them out, and they can keep the visual identity consistent.

Although web fonts can improve your email design, they can also sabotage your efforts. In this article, we will learn the difference between web-safe fonts and web-fonts. We will discover which email clients support which web fonts, and give you some actionable tips to use the power of fonts in email – all supported by awesome email examples.

What is a font family?

Let’s have a quick peek at font families.

Source: Mozilla.org

The main characteristics of these fonts are different, and they are best used for several different purposes. There are fonts that are best suited for the professional world (the most professional fonts, best fonts for business emails), while others are better for a more relaxed tone. There are fonts that are email-safe fonts.

People usually ask what is the easiest font to read which is important, but I would advise you to be more careful when making a headline design from fonts.

Serif fonts

Serif fonts have little feet and tails. They lead the eyes so we can read the printed copies easily. That’s why these fonts are usually used in books.

Calibri is often mistaken as a Serif font but it’s actually Sans-Serif.

Sans-Serif fonts

Sans-Serif fonts don’t have any extra features. “Sans” in French means “without”. Sans-Serif fonts are, therefore “Without Serif”, meaning without those little tails at the letter extensions. These fonts are easy to read on screens.

Fonts like Arial, Verdana, and Helvetica are all part of the Sans Serif family.

 Gmail uses Arial. Apple Mail uses Helvetica, and Outlook uses Calibri

Source: Wikipedia.org

Fantasy fonts

These fonts require careful consideration before being used. They can come in all shapes and sizes, allowing you to express your creativity, but they don’t fit many content types.

Keep in mind that these fonts are not suitable to be used in the body of your email. They are difficult to read, so use them for headlines only.

Source: Sitepoint.com

Monospaced fonts

The main characteristic of these fonts is that each letter has the same horizontal size. This type is still used in text editors because it provides excellent readability.

Cursive fonts

This font type can be in any format of penmanship. The characters are joined together as if they were handwritten.

Just like fantasy fonts, cursive fonts are not recommended for writing your whole email copy either as they can be difficult to read on screens.

Open Sans

It is a humanist sans serif typeface designed by Steve Matteson. They have a neutral look to them, yet remind friendly and easy on the eyes. Open Sans is highly legible on screen and in small sizes.

Web fonts and web-safe fonts in email

Choosing the right email fonts is very important, as it can be a problem if your emails don’t render well. Usually, email designers use web-safe fonts to design their emails, but this limits their options in terms of creativity.

Every brand wants to be consistent and uses the same colors and fonts for branding purposes. That’s why designers started to use web-fonts.

What are web-safe fonts?

Web-safe fonts are the fonts that have been used since the invention of the internet. They are used by default in email clients.

Web-safe fonts are Arial, Verdana, Helvetica, Tahoma, Trebuchet, Georgia, Times New Roman, and Courier.

They are default HTML email fonts that can be used on all devices, email clients, and operating systems.

They are classic and safe, rendering perfectly on almost all devices, which makes them popular with big brands such as Jeep, Nestle, JCPenny, and Target.

What are web fonts?

Web fonts are fonts that have been designed specifically for a website or to be sold under a license. Web fonts are not installed by default and don’t always render properly on email clients.

Some examples of web fonts include Poppins, Cairo, Lora, Roboto, Montserrat, Lato, Nunito…

Source

Different email clients, such as Outlook, or other clients on Windows or Mac OS, use different default settings. It means that if you use web fonts, it might be impossible to display them properly. They won’t render on the readers’ screens.

Email clients can use the fonts that are installed on the computer only. To make our life even more exciting, Mac and Windows computers also have different default settings.

When you find out which font you want to use, the most critical factor to keep in mind is the usability of your fonts.

Are these fonts presentable for most recipients? If your answer is no, make sure you have a backup plan, called fallback fonts.

Which email clients support web fonts?

Email clients that support web fonts:

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

If the email client doesn’t support the web font you used, a fallback font will be displayed. Your backup plan leverages the web-safe fonts: Helvetica, Arial, Times New Roman.

If you really want to use a particular font, there is still a shortcut: insert an image in your email. But keep in mind that not every email client will show images by default.

Example of an email with the block image option on.

Default Email Font Settings

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

What are the best fonts to use in emails?

The best fonts to use are definitely the websafe fonts or default fonts which will render perfectly on every email client and device.

Times New Roman

Our old, classy friend. This is probably one of the most often used typefaces. Do you remember when teachers recommended using this font? It wasn’t a coincidence.

Verdana

Verdana was developed to have an airy style which helps people read it.

Georgia

It was also designed to be a practical font. It has soft edges, and it’s easy to read.

Helvetica

Work so well in emails because they were designed to fit the pixels of the screens.

Geneva

It’s a new version of Helvetica.

What is the best font size for newsletters?

The font size depends on the typeface. Headlines should be between 22 and 28 pixels, and the body font size should be around 14-18 pixels.

What is the best line spacing and height in emails?

Line spacing

Different fonts require different line spacing. Make sure the lines are not too tight nor too far apart.

Use a 1.4 – 1.5 times bigger size for your line-height to ensure great readability.

Source: 99Designs.com

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.

Line height

You should also consider different line spacing if you use a dark background; otherwise, it will be hard to read.

Source: 99Designs.com

What is the best text alignment in emails?

You can center your copy, or align it to the right or the left of your email.

For best readability, I would advise you to use left-aligned. Both centered and right-aligned text feels harder to read than the traditional left-aligned text.

Example of left-aligned text

Of course, you can play around with text alignment in titles, or when you place specific text over images, and you want that text to visually stand out from the rest of the design.

Example of centered text over an image

Basically, there is no rule when it comes to text alignment in your email design.

What is the best font for an email signature?

Use Verdana or Calibri for your email signature font, both classy and timeless. The size 12 would be just perfect.

Source: Tutsplus.com

Read more | Email Signature Design Best Practices Illustrated with 20+ Examples

Font pairings in email

Less is sometimes more. Don’t use more than three different fonts for your emails. Aim to create a clean, refined, clear email design.

You can combine serif and sans-serif fonts. For example, your headlines can be sans serif, and the body can be serif or vice-versa.

It’s necessary to distinguish the headline and your content from each other, in terms of design. You can also use the same typeface for your headline and your copy, but make sure the headline is bigger than the body of your text. Its font size should be at least double that of your copy.

Here’s a gorgeous example of how Blume highlights different sections of the email copy by focusing on email font and size.

Font color in emails

Stick to your brand colors and use them as a base. If you want to expand your email color palette, make sure to:

• Choose a matching color. You can use a color palette generating tool, such as Coolors.
• Remember that each color has a different impact, so make sure you pick the one that fits your brand the best.

Source: Helpscout.net

• Keep it simple. Don’t use more than three font sizes and two colors in your emails.
• Stay consistent with your brand.

This beautiful email sent by Revolve shows has mainly two colors: blush pink for the background and white/beige for the font color. This combination makes the email look refined, elevate, classy and on-brand.

Revolve added a splash of color with a beautiful colorful image.

This next amazing email is very colorful: the brand uses at least 7 different colors to highlight each product. However, notice how the font color is always consistent. The dark blue color of the font is used for the headline as well as the email body. The email designer made sure to choose a color that pairs perfectly with all the colors of the email blocks.

Format links in your emails

If you decide to place URLs within your copy, you can use bold fonts or your brand’s color to highlight hyperlinks. Underlining and using blue colors for this purpose is so 20th century.

Probably the best thing to do is letting readers tap on the links in your copy, image, and CTA. You never know where they feel like tapping.

Actionable tips to use email fonts

• Be consistent: Use the same typefaces, fonts, and size throughout your email campaigns. It will look funny if one of your newsletter typefaces is in Comic whereas the other one was in Times New Roman. Also, make sure that your email font aligns with your brand. Choose the colors you use on your website.
• Don’t use too small fonts: This one is crucial if you think of mobile. Responsive design is always a priority. Mobile users can’t read tiny characters. The recommended size is at least 14 px. If you want to play it safe, use at minimum 16px.Research conducted by Litmus showed that 54 % of email opens happen on mobile. It’s quite a good reason to pay attention to this detail, isn’t it?
• Too big fonts aren’t hot either: They would just yell in the face of the recipients. Big No. However, if the people you target are old, you can adjust the size to make sure they can read your email even without their glasses.
• Customized fonts that no one else uses on this Earth, except you: I understand your passion for a rare and really special font. But, if your recipients can’t read it because they don’t have it downloaded, your amazing font is useless. Other than that, custom fonts in email can be pretty cool. If you are wondering how to embed custom fonts in an email, that is not easy. Some email builders have this option, but most don’t have it. In Chamaileon, we are planning to develop it soon.
• Inappropriate fonts: Again, if you send a business email, use professional typefaces and fonts. The most common business email fonts are Times New Roman, Helvetica, and Arial. As you would use business language when having a meeting, this font will ensure that the same style will be communicated.

NOTE: We recently published an email template collection where we have already predesigned email templates with web-safe fonts only. You can modify and use them for free in your campaigns. Access the collection here.

How can you use web fonts in your emails?

There are two ways of using web fonts for your email design: you can download and host the font on your computer, or you can use a web font hosting service.

Below, I’ll talk a bit about the coding aspect of web fonts use in email, but if you would rather use a visual email builder that takes care of the coding for you, come and join thousands of happy users. You can access our email builder here for free.

In Chamaileon, you will be able to configure which web fonts and fallback fonts you want to use on a company-wide, team-wide, or project-level basis, and our generator engine will take care of the email coding for you.

Self-hosting the web font

This is an excellent solution if you have the resources. Why?

The disadvantage of self-hosting is that you have to pay to get those fonts and host them. But once you downloaded the fonts and host them on your computer, no third party will be involved.

If the web hosting service goes down, you won’t suffer the consequences. If this service suddenly stops, you could lose all your fonts and settings.

So if you can afford it, invest in self-hosting, just to be on the safe side. If you do so, make sure to have a reliable infrastructure that won’t stop working and is speedy enough to serve your region and number of subscribers.

To start with, you’ll need a font editing software. Font Forge is a great editor to design and test your fonts.

Webfont hosting services

These hosting services are either free or subscription-based.

Instead of downloading email fonts to your computer, you can use hosting services by using the @font-face, @import or the link method.

Use the @font-face CSS rule

You need to add the @face-font rule to your stylesheet. This process allows you to detail the typeface, the source of the font, and the weight.

In the example above, we used the .ttf extension, but we have more options to use.

Different browsers use different fonts as well.

Webfont hosting services offer .woff (Web Open Font Format), .woff2, .ttf (True Type Font), .eot (Embedded Open Font) and .svg formats.

The .woff format has the most widespread support among email clients, so I would recommend that you use that one.

Source: Mozilla.org

Using the @import method

This is a simple way of importing your fonts. The service will provide you the code you need to insert in the header and style sections as the example shows below.

If you decide to self-host your font, you need to link to this URL. The disadvantage of this method is that the web fonts load slower than your email.

Using the link method

This technique is popular because it is supported by most email clients.

The web font service will give the href value for you as well. If you downloaded the font and decided to change the href value, you can modify it where you host the font.

The hosting service will provide you the URL that you need to copy and paste in your header.

Source: Stackoverflow.com

Google Fonts offers several fonts that are free to use. You can play around with them to figure out if they fit your email design. Using google fonts in email newsletters is a pretty good idea.

Once you picked the font you like, copy the stylesheet that Google has created and paste it into the header section of your email. It’s a great web hosting platform, as it’s free and provides a Step by Step Guide to help you.

Always make sure to add a fallback websafe font just in case, to make sure the recipients can actually read your email even if they don’t have your chosen font downloaded.

Choose a fallback font that is similar to your web font. E.g., if you use a serif font pick a serif default font as well. This method will help you keep the design together.

But be aware that different fonts have different sizes, so most likely your email with the fallback font will look slightly different from the original one.

Webfont services:

• Typekit is part of the Adobe family. They have very good quality fonts, and their catalog is very impressive as well. Here, you will find the one you are looking for—I promise you. On top of that, if you have an Adobe Cloud Membership, this service is free.
• My Font
• Font Shop

In Chamaileon you will be able to add fonts from any source, so the decision is yours which one to choose.

Conclusion

To sum up, let me answer the most common questions about fonts in emails.

• What is the easiest font to read? Sans-Serif fonts are easy to read on screens, for example, Arial.
• What is the most professional font? Georgia. It’s the best font for business email. When creating a business email use serious, old fashion fonts for standard corporate email correspondence. You must be wondering what is the most professional font. Here, Georgia typeface would be a safe choice. It looks like the most professional email, and it is also easy to read. Avoid fantasy and cursive letters.
• What is the best font? That depends on the type of your newsletter.
• What are the best web-safe fonts? Times New Roman, Helvetica, Verdana, Georgia, Geneva.

I think 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. Make sure you choose the best font for your marketing emails.

The most important takeaway is that if you choose to use web fonts, always make sure you set web-safe fallback options that will appear properly on devices that don’t support modern fonts.