When sending an email, you can’t just use any old font that looks nice and call it a day. Email marketers should be familiar with web safe fonts, the fonts that are optimized for use on webpages and have historically been used to craft landing page and email copy. In the early days of web development, there were only a few web font options, like Arial and Times New Roman. But as designers have begun to increasingly embrace the importance of cultivating a unique brand style, more and more web fonts have become usable for emails.
To learn which fonts are best for emails, let’s break if down a bit.
What’s the difference between web fonts and web safe fonts?
Essentially, a font is considered “web safe” when it is universally recognized by computers, browsers, and operating systems. They’re the only fonts that are guaranteed to be recognized across all common systems. You’ll recognize these fonts like Georgia, Courier, Veranda (and the two mentioned above) as fonts that are automatic options whenever you’re typing in a word processor or email program. Because they come by default on every computer, you can assume they will have universal support by the recipients of your emails, and there shouldn’t be any issues.
Web fonts, on the other hand, are not automatically installed in every computer and operating system, but are designed specifically for use on web pages. They’re a CSS feature that can be encoded to download in tandem with your web page or email — in other words, when a user opens your web page or email, the web font will load along with the rest of the design aspects. A user will not realize this is happening; to your audience, there’s no distinguishing difference between web safe and web fonts besides the look and uniqueness of the text.
Designing web fonts means that your team has more options of text stylings to use, helping differentiate your brand from competitors. Web font services like Adobe’s Typekit and Google Fonts are great places to look for downloadable font options. With any web font service, make sure that the End User License Agreement (EULA) includes using the fonts in emails, not just web pages. Which brings us to an important point:
What do I need to know about using web fonts in emails?
Besides making sure that the licensing agreement for the font includes emails, you’ll need to know how to embed web fonts into your emails — unless you use an email creation platform that handles this for you. If you want to save the time and headache of setting up your email code to support web fonts, we recommend chatting with a stensul expert about how our solution makes this really easy for you.
If you need to create custom emails before adopting a creation solution, there are three ways you can use web fonts into your emails:
- Use @import by plugging @import url’([insert the font’s URL here]’); into the <head> of your email, inside <style>. The web font source you use will give you the font’s URL to insert into your code.
- Use <link> by inserting this code in the email <head>: <link href=’[font URL goes here]” rel=”stylesheet” type=”text/css”>.
- Use @font-face by coding this equation inside <style>:
@font-face {
font-family: ‘[font title name]’;
font-style: [normal, bold etc];
font-weight: 400;
src: local(‘[font name-style]’), url([the font’s URL];
As you can see, @font-face is the most complex embedding method and therefore has room for the most error, but it’s considered the most bulletproof way to ensure your web font will load quickly and correctly with each email open.
Why you need a fallback font
A fallback font is a web safe font put in place for users whose browsers don’t support web fonts. Having a fallback font in place is imperative so that all of your users are able to read your emails, regardless of their how ancient their email client might be. Every email client has a default web font — Gmail uses Arial and Outlook uses Calibri, for example — but you can supply a list of preferred fallback fonts in case you don’t like the default font options.
For example, if you code your font to look like this:
font-family: ‘Merriweather’’, Times New Roman, serif;
Email browsers will automatically use Times New Roman if they don’t support the font Merriweather. If for some reason they don’t support Times New Roman either (which would be strange, since it’s web safe), you have a fool-proof safety measure in place by instructing your email to then be read in the browser’s default serif font.
Naturally, your designers will want to choose a fallback font that fits most closely with the design, so stick with either a serif or sans-serif motif (you wouldn’t use Veranda as a fallback for the serif Merriweather in the example above), and try to ensure that the x-height is similar across your font choices. CSS Font Stack has a helpful fallback font guide to turn to, including information about which operating systems recognize which fonts.
Outlook specifications to keep in mind
As plenty of email marketers know, Outlook often presents its own set of typography challenges that are important to keep in mind, since it remains a highly-used email client amongst enterprise organizations.
While Microsoft’s 2019 Outlook update will recognize fallback fonts, any version older than that will default any non-secure fonts to Times New Roman. If you don’t want your emails to show up in a serif font (specifically Times New Roman), you’ll have to use an Outlook-specific hack. Use:
<!–[if mso]>
<style type=”text/css”>
.fallback-font {
font-family: [insert preferred fallback font here], sans-serif;
}
</style>
<![endif]–>
In the above example, Outlook will substitute Times New Roman for your chosen fallback font, resorting to a default sans-serif font if necessary.
Let’s not forget about brand governance
The web fonts your organization uses for email should be recognizable from your web pages to ensure that your audience associates your emails with your brand. Having clear and consistent font choices is a key aspect of brand style governance, helping to differentiate your organization from competitors and provide a cohesive look to your content.
Looking for a solution that will ensure that your emails are built with unique, email-optimized web fonts? Schedule a demo with a stensul expert today.
