Email designers create amazing emails by using the right email fonts. Sometimes they borrow web fonts that web developers use. This method allows them leveraging technology and creative copy at the same time.
Initially, web fonts were developed for websites and apps. These fonts can be used to communicate your branding on the website very easily.
Email designers are not so lucky though. They are limited when it comes to fonts because there is only a handful of them which work properly in all email clients. But they realized that web fonts can help them out. So 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. And, 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. Basically, they aren't two separate things, one can't exist without the other.
The main characteristics of these fonts are different and they can be used for several purposes. Some are more suitable for business emails and some 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.
San Serif font
San Serif fonts don't have any extra features. In case your French is as great as mine, san means: without. San Serifs are easy to read on the 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, these fonts are not suitable to be used in the body of your email. They are very difficult to read so use them for headlines only.
The main characteristic of this font is that each letter has the same horizontal size. This type is still used in text editors because it provides great 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 good 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 in terms of design.
You can combine serif and san serif fonts, for example, your headlines can be san serif and the body can be serif or the other way around.
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 as much as in your copy.
Colors can have a huge effect on us. So do they when your recipients read your message.
Stick to the colors you've already chosen for your website. Remember, each color has a different impact, make sure you pick the one that fits your brand the most.
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 visually really bad experience. Four colors were used beside several font size and it resulted in a cheap look.
You can place the copy in the middle, on the right or on the left of your email.
For best readability, I would advise you to use left align though. Both centered and right aligned text is much harder to read than traditional left align.
Of course, you can play around with text alignment in titles, or when you place certain text over images and you want that certain text to 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 a combination of Icon, bold headline and call to action.
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.
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 3 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 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. 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.
Normally, email designers use web safe fonts to design their emails but they limit 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 blossom creativity.
However, the texts on the images are invisible to the 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, 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 can use the fonts that are installed on the computer only. To make our life even more exciting, Macintosh and Windows computers also have different default settings.
When you find out which font you want to use, the most important factor to keep in mind is the usability of your fonts.
Are these fonts presentable for most recipients? If your answer is not, 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, fallback fonts will be shown. Your backup plan leverages the web safe fonts: Helvetica, Arial, Times New Roman.
If you really want to use a certain font, there is still a shortcut: insert an image in your email. But not every email client shows 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, 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 font 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 are going to be able to configure which web fonts and fallback fonts do you want to use on company, team or project level and our generator engine will take care of email coding for you.
Self-hosting the web font
This is a great 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 stopped, you would lose all your fonts and settings.
So if you can afford it, invest in hosting, just to be on the safe side. If you do so, make sure to have a solid 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 biggest support among email clients, so I would advise you to 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 too that will help you to get around.
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 creative 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 a 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. You will find the one, I promise you. On the top of that, if you have Adobe Cloud Membership, this service is free.
In Chamaileon you are going to 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.
Times New Romans
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, 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 are able to 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 bad for emails.
The most common typefaces for newsletters are Time 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 safe to be used. It looks serious 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 through your email campaigns. It would look funny if one of your newsletter typefaces was 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 very little characters. The recommended size is at least 14 px. If you want to play safe use min 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 to 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.
Again, if you send a business email, use serious typefaces and fonts. The most common business email fonts are Times New Roman, Helvetica, Arial.
As you would use business language when having a meeting, this font will ensure that the same style will be communicated.
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 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.