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 write original copy at the same time.
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.
Using the best email fonts might require having some coding skills. If you don't pay attention to the details, you might miss the opportunity to communicate your message in the most effective way.
You should always consider content as a priority to email design. Make sure your design doesn't ruin it.
If you aren't a designer, the term typography may sound intimidating. It sounds like some old school expression. It is.
Back in the day, typography was designed to influence the impact of the copy. People realized that it was possible to express the mood, the tone of voice, even the personality by using the right design.
The same principle applies to emails too. Of course, you can control emotions through email copywriting, but typography helps you boost your effort.
Some people confuse typeface with fonts; they may even think they are the same things.
The term typeface is from the days when we used analog printing. Long story short, we needed different metal blocks for each letter.
If you wanted to use a certain typeface, but in different sizes, you needed different blocks to print them. You also needed extra weight if you wanted the letters to be bold.
For this reason, the Arial at 10 points was different from the Bold Arial at 12 points for instance.
So the typeface was the design of the letter, whereas the size and the weight meant the font.
These terms have different meanings in the digital world though. We could refer to fonts as files that include all the characteristics of a typeface. They aren't two separate things; one can't exist without the other.
The main characteristics of these fonts are different, and they are best used for several different purposes. Some are more suitable for business emails, while others are better for funny ones.
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 used for books, for instance.
Sans-Serif fonts don't have any extra features. In case your French is as good as mine, sans means "without". Sans-Serif fonts are easy to read on screens. Arial, Verdana, and Helvetica are all part of this family.
These fonts require careful consideration. 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.
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 like they were handwritten.
Just like the fantasy fonts, cursive fonts are not recommended for writing your whole copy either.
Less is sometimes more. Don't use more than three different fonts for your emails. Aim to produce organized, clear email design.
It's necessary to distinguish the headline and your content from each other, in terms of 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.
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.
Colors can have a significant effect on us. This holds true for when your recipients read your message.
Stick to the colors you've already chosen for your website. Remember that each color has a different impact, so make sure you pick the one that fits your brand the best.
Keep it simple; don't use more than three font sizes and two colors in your emails. Also, stay consistent when you use them; otherwise your email will look cluttered.
This email example shows how different colors can lead to a poor visual experience. Four colors were used beside several font sizes, and it resulted in a cheap look.
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 is much harder to read than traditional 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.
This email from EE is simple and clear. They aligned the copy on the left, and as you can see it looks organized indeed. They also used the power of icons in the email template in the footer, with the combination of an icon, bold headline, and call to action.
Different typefaces require different line spacing. Make sure the lines are not too tight nor too loose. Use a 1.4 - 1.5 times bigger size for your line height to ensure great readability.
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.
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.
I love the way Waitrose uses whitespace to grab the reader's attention. They only use black color and three fonts. Simple and brilliant.
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 mobile devices, so there is a higher chance of getting readers 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. 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.
Choosing the right email fonts is very important, as it can be a problem if your emails don't render on the recipients' screens.
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. This technique allows blossoming creativity.
However, text on images is invisible to email clients, causing a few issues. And there is more.
To start with, I'll outline the major problems.
Different email clients, such as Outlook, or other clients on Windows or Mac OS, 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 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:
Unfortunately, Google became less supportive as it doesn't use style tags anymore.
If the recipient's email client doesn't support the font you used, the client will use fallback fonts you designated. 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 not every email client will show images by default.
I received this email without the image. I don't know if there was any CTA in the image, but maybe there was.
Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet, and Verdana are the default email fonts. They are safe to use because they are installed on almost every device.
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 our early testers.
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 which 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.
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.
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.
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.
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 sizings, so most likely your email with the fallback font will look slightly different from the original one.
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 the top of that, if you have an Adobe Cloud Membership, this service is free.
In Chamaileon you will be able to add fonts from any source, so the decision is yours which one to choose.
The so-called websafe fonts or default fonts are recommended to use. These fonts render really well on every screen and are compatible with all email clients.
That's why in Chamaileon, our free responsive email designer, we use web safe fonts.
These are the best web safe fonts:
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.
Verdana and Georgia work so well in emails because they were designed to fit the pixels of the screens.
Gmail uses Arial however, if 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.
Bloomsberg's study shows that Helvetica and Arial are poor choices for emails.
The most common typefaces for newsletters are Times News Roman, Verdana, Arial, and Tahoma.
These are safe choices to make and can be used for any purpose.
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.
Use serious, old fashion fonts for standard corporate email correspondence. The Georgia typeface is a safe choice. It looks professional, and it is also easy to read. Avoid fantasy and cursive letters.
What is the best font for an email signature?
Your signature is something personal which might encourage you to show your actual personality. Don't do that. Use Verdana which is classy and humble. The size 12 would be just perfect.
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.
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.
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 them and use for free in your campaigns. Access the collection here.
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.
The most important takeaway is that if you choose to use web fonts, always make sure you set web-safe fall back options that will appear properly on devices that don't support modern fonts.