Every year, on the Tuesday following Thanksgiving, the world, celebrates Giving Tuesday. A global day meant to inspire goodness and...

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.
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 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 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
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
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.
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.
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.
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.
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.
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…
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.
Email clients that support web fonts:
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.
The best fonts to use are definitely the websafe fonts or default fonts which will render perfectly on every email client and device.
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 was developed to have an airy style which helps people read it.
It was also designed to be a practical font. It has soft edges, and it’s easy to read.
Work so well in emails because they were designed to fit the pixels of the screens.
It’s a new version of Helvetica.
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.
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.
You should also consider different line spacing if you use a dark background; otherwise, it will be hard to read.
Source: 99Designs.com
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.
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
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.
Stick to your brand colors and use them as a base. If you want to expand your email color palette, make sure to:
Source: Helpscout.net
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.
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.
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.
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.
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.
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.
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.
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
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.
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:
In Chamaileon you will be able to add fonts from any source, so the decision is yours which one to choose.
To sum up, let me answer the most common questions about fonts in emails.
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.