What can you use?
Choosing – or even creating – the fonts you will use in your designs is a creative process, it can distinguish your work, make your brand more recognizable and so on. But unfortunately the modern @font-face is currently only integrated in web browsers, not in email clients – less than half of them support modern fonts. This means you have to choose from a very limited pool of font types.
Web-safe sans-serif fonts include Arial, Arial Black, Tahoma, Trebuchet MS and Verdana; serif fonts which are safe to use are Courier, Courier New, Georgia, Times and Times New Roman. Besides these there are a number of fonts (like Geneva or MS Serif) which will give you a decent coverage with few problems – but even when using these, a more common font should be included as a replacement should the client not support it.
How others do it?
Image source: StyleCampaign
A very fresh research from StyleCampaign sheds some light on industry standards. While working from a relatively small sample (50 different responsive, single-column emails) various patterns emerged from the raw data.
The first thing we can see is that sans-serif types dominate headings (with 74%) with the most popular choices being Helvetica or Arial. The most common serif types were Georgia and Merriweather. Sans serif types were also chosen more frequently as body typefaces, but their share shrank to 64%.
Given the limited choices most marketers choose to mix not only typefaces for heading and body copy but also serif and sans-serif types. Your opportunities for being creative are quite limited, so this is probably the best chance at giving your email some uniqueness.
Other than font, what should you focus on?
Other than typefaces there are plenty of options you can use to be unique.
Generally there is not much difference in font size when taking a look at emails on desktop or mobile – sizes range from 13-20px with the average being around 16px.
When choosing a font size you should pay attention to reading distance. When reading emails on desktop, 16-18px is more than comfortable in most cases. You should also note that most users hold iPads – and generally tablets – further away than phones, so font size should be a bit bigger. A good responsive email editor will help you in designing the best look for all devices.
According to the Content Marketing Institute you should set your headlines to at least 22px and your text body to at least 14px. And one other thing: on Apple devices (we have discussed why they are especially important) any font size smaller than 12px will be resized to 12px. This can change the appearance in an unexpected way. Another reason to avoid small fonts.
CTA-s should be larger than standard text obviously to catch the viewer’s attention – and also to make them “tap” friendly. iOS guidelines suggest that a tappable area should be at least 44 × 44px. You can’t really achieve this with simple link and without making a ridiculously large CTA, so try to find a solution in between.
Spin the color wheel (carefully)!
You can also play with colors, but be careful: *you shouldn’t make a rainbow *out of your mail. Even with slight changes in text color from black to certain shades of grey you can achieve a more elegant look – which you can strengthen with wise background color choices.
Most email marketers use black for the font and white for the background – which is arguably the simplest solution, but it is also the simplest way for you to be like everyone else.
Don’t be extravagant (well, unless it is a part of your campaign or brand), but be sure to explore the possibilities of your email editor.
The bottom line is: you can follow standards, but they will only get you so far. Of course what is the most important part of your mail is the copy, the best placement of CTAs, good headlines and so on, but if you don’t dress it accordingly, you will more likely come off as boring. Having few options considering font types should not limit your creativity in shaping the mail to achieve the best results.
Would love to hear about your email typography tips and trick in the comments section!
Paddings, Margins and Borders in Modern HTML Emails
Throughout this tutorial series, we have been using paddings, margins and borders a lot. We haveRead more
Typography in Modern HTML Emails
In the last few weeks, we went through the main principles and limitations of HTML Emails.Read more
Background Images in Modern HTML Emails
This article uncovers the approaches how background images can be set in email HTML. Various emailRead more