All You Need to Know About Web Fonts in Email
Introduction
If you could travel back in time to the wild west days of the early internet, you would find a web filled with very basic fonts that made designers and marketers cringe. That’s because marketers were forced to use the handful of web safe fonts that were most common at the time.
But some very smart and creative people wanted to do more. And so as happens with so many emerging technologies, it was a forcing function for changes. Enter web fonts.
We partnered with Jay Oram to bring you heaps of web font know-how in this guide so you can use web fonts in your email campaigns like a pro.
Fonts
Before diving into the world of fonts in email, it’s important to know some information about fonts, terminology and where to find out more!
Fonts can express your brand and convey a specific message or aspect of your designs. They are an essential part of any branding guidelines and an important part of smart email design.
As you will discover, email clients don’t all support importing fonts into your email that are not already on a user’s computer. But knowing a bit about fonts and how the web uses them will give you all the knowledge to let your brand shine through, whether using a web safe font or linked web font. Chris from Action Rocket has a great article on Fonts and the history behind them here.
Font or typeface?
A typeface is a group of fonts all with the same design elements, such as cap-height, x-height, serif and letter-spacing. Fonts are the different weights, widths and styles that make up that typeface.
Cap-height and x-height
These are exactly what they sound like, the height of the capital letters or the letter ‘x’ in a font. This is helpful when choosing fonts that look similar. By choosing a group of fonts with similar x-height, you can ensure a good design experience across email clients.
Serif or sans-serif
A serif is the ‘tail’ of a character. Some fonts like Time New Roman have added tails on letters, whereas Arial fonts do not have these extra parts.
Which should you choose?
Serif fonts give a feeling of classic, stylish and traditional brands, such as The Times newspaper or classic brands such as Jaguar and J.P Morgan and academic institutions such as Cambridge and Harvard University.
Sans-serif fonts are often identified with more modern, cutting edge brands, such as Google, Spotify and Adidas.
Your brand guidelines will give you a hint of the style of font that should be used, and in some cases will give you a specific font.
Letter-spacing
Letter spacing is the space between each letter. Some fonts have characters close together, whilst others have more room between them. Another important factor when choosing fonts for your emails.
Not all email clients will allow you to import your brand font and show it to your email readers so you will need to set a few fonts in your ‘font stack’. If they all have similar x-height, letter-spacing and are serif or sans-serif to match your brand font, length of copy and the reader’s experience should remain consistent.
Elements you can control
Not all fonts may be supported, but you can ensure some elements are consistent. These include, font-size, font-weight, line-height and font-style.
Font-size
The height of your font can be controlled by using font-size in your email CSS. You can set this in the WYSIWYG editor on Campaign Monitor, or if you are coding your email HTML yourself, font-size can be set with units such as pixels(px) and points(pt) or by using relative units such as percentages(%) or viewport width(vw). Each has their own merits and support across email clients, which you can check on the Campaign Monitor CSS guide.
style=”font-size: 16px;”
Line-height
The line-height can be set using the same units as font-size and let’s the user control the height of the line, this won’t affect the font-size, but the gap above and below lines of text. A bigger line-height will add more space between lines of text.
style=”line-height: 22px;”
Font-weight
This CSS attribute allows you to control the weight of each character, either by setting a numerical value or using words such as bold or normal. Font-weight is set at intervals of 100, with 100 being the thinnest lightest font-weight to 900 being the boldest.
style=”font-weight: bold;”
TIP: Accessibility and font-weight
WCAG guidelines suggest using bold tags <b> or font-weight: bold / 700 to show a piece of text as bold for the design only. This won’t be highlighted to screen readers as something to emphasise. If you want a screen reader to emphasise an element in the text it should be wrapped in <strong> tags.
Font-style
To emphasise a word or some text in your email you can use the CSS attribute font-style, and choose from italic, normal or oblique styling.
style=”font-style: italic;”
Choosing fonts
Now that you understand all the aspects of a font and how you can style them within your email, you can choose your fonts, yes multiple, as I have mentioned previously, not all email clients will support your branded, linked or custom font, so as well as the font you choose for your brand or the one that is in your brand guidelines, you will need to choose suitable fonts that will act as fallbacks. These fonts are all included in your font-stack.
When your email is built in HTML and CSS, the coder will add a set of fonts that the email will run through until it finds one that is supported. This is included in the font-family CSS attribute:
style=”font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;”
In the above example, the font stack starts with Google’s ‘Open Sans’ font – this isn’t included as standard on all computers and will need to be linked in your email. If an email client doesn’t support linking the Google font, it will move to the next, Helvetica, commonly found on Apple computers. If the user has this installed on their computer, it will show this font, if not it will move on to Arial – a font pre-installed on most devices—but not all.
So the final font in the stack is ‘sans-serif’. this means your email will be displayed in whatever pre-set sans-serif font is available on that device. The final font in your font stack should be sans-serif or serif—to ensure that the correct style of font is used, even if none of your specified fonts are present.
Using all of the above information, you will have your brand font. Then you will need to choose some web safe fonts to add to your font-stack.
What are web safe fonts and web fonts?
There are web safe fonts and web fonts but what’s the difference? We’re glad you asked.
Web safe fonts
Web safe fonts includes fonts such as:
Arial
Verdana
Georgia
Times New Roman
Courier
These are all considered web safe fonts that can be used for live text in email, they are ‘Web Safe’ as they are found pre-loaded on to most users devices. These change over time, with the above list being computer staples for a number of years. You can find a good breakdown of fonts at https://www.cssfontstack.com/.
Who uses web safe fonts?
Employing web safe fonts may seem boring, but there are plenty of brands who use this type of text. Why? Because web safe fonts, in many cases, are classic. They look clean and render on virtually any device.
Brands that use web safe fonts or a variation of these fonts include massive companies, such as:
American Apparel
Crate & Barrel
JCPenney
Jeep
Mattel
Nestle
Panasonic
Target
Time
Toyota
Web fonts
Web fonts are typically not found on multiple operating systems and devices. They’re specifically designed and licensed for use online. Web fonts allow for more creativity for the designer as they aren’t limited to choosing a font that comes pre-installed on a computer.
Email client support for web fonts
The right font not only makes your emails easy on the eyes, but it also can convey a range of emotions.
Using fonts correctly is essential to an effective email marketing campaign. When it comes to email marketing, it’s best practice to use web fonts wherever you can. However, it’s important to keep in mind that not all email clients offer universal support for web fonts.
Generally, the following email clients have good support for web fonts:
– iOS Mail app
– Apple Mail
– Samsung Mail app
– Thunderbird
– Outlook MacOS
However, web font support depends on the email client and how the web font is embedded in the email.
As we mentioned earlier on, if a user doesn’t include a supported font, the email client will run through the font-stack and will show the next supported font, with some exceptions.
Outlook on Windows
There currently isn’t a way to include a custom web font in Outlook. Older versions of Outlook used to default to Times New Roman unless a specific fix was added (we share this later!), but the latest version, Outlook 2019, now follows your fallback fonts.
Gmail
With a large share of the email market, Gmail doesn’t support web fonts (It doesn’t even support its own Google fonts!!). Gmail does have some fonts it uses. The default is Roboto, but it does show Google Sans, Google Sans Medium, Product Sans, Roboto Italic, Roboto Regular, Roboto Medium and Roboto Bold. By including these in your font-stack, Gmail should render your chosen font.
Fonts and accessibility
Choosing and styling fonts in your email can give you a massive range of options. Whilst you should be considering your brand guidelines and the needs of that specific design, something that should be second nature to email designers is to think about how accessible your choice is.
Font choice
You should use your brand guidelines to find the font to match your brand. The team choosing the font has most likely taken accessibility into account when picking it, but if you get the chance to help with this choice and whilst choosing fallback fonts, there are some things to consider that will increase the accessibility of your choice.
Check out this excellent blog on choosing an accessible font from Fontsmith. Some points to consider include:
Do characters look similar?
Can you tell the difference between a capital ‘I’ and a lowercase ‘l’?
How close are the letter ‘B’ and the number ‘8’?
Are the ‘b’ and ‘d’ symmetric or altered to aid in distinguishing the two?
Are the letters too close together or joined and are the negative spaces, such as the center of an ‘O’ or ‘P’ large enough to be distinguishable?
Look for a highly crafted typeface with a considered, clear and elegant design.
-Fontsmith
Color choice
Basic email design principles will ensure that your font has a high enough contrast with the background color or image it is on to make it clear to read. WCAG (Web Content Accessibility Guidelines) recommend a contrast of at least 4.5 to meet AA standard, or 7.0 to reach AAA standard.
Reaching a contrast of 4.5 should be the minimum for all font and background color choices. To check your color contrast you can use an online tool, such as the WebAIM contrast checker.
Font-size
A minimum size of 14 pixels or the equivalent in relative units is widely accepted as a minimum to ensure your text is accessible. On mobile devices this can still seem a bit small for most, with an optimum size of 16 pixels as best for all of your audience.
Line-height
The space between the lines of text in your email can make it easy or hard to understand. Increasing the line-height will make it easier for recipients to read large blocks of text.
Alignment
Another factor in your design should be the alignment of your text. Left aligned text is best for blocks of text with more than two lines. Center aligning short titles and subheadings is okay, but if you do this with too much text it makes it much harder to read. Never justify text over two lines in length and this makes it difficult to follow and read.
How to use web fonts in your email campaigns
Campaign Monitor’s powerful email builder takes all the guesswork out of using web fonts in your emails as they are built right in.
Our drag-and-drop email builder has a multitude of fonts that can be used in your campaigns that are supported by most email clients. If they’re not, a suitable fallback font will be displayed instead, with zero extra work required on your part.
For those who code
If you’re sporting some technical know-how about web fonts, then read on as we go a bit more in-depth on the topic.
How to embed web fonts in email
If you’re still reading you must know your web font stuff and you know a thing or two about coding an email (or at least, you’re ready to learn!). So let’s talk about how to embed web fonts in your emails.
It’s surprisingly easy to serve up web fonts in your HTML email. There are three approaches, all with slightly different levels of support in different email clients.
Two of these methods import your chosen fonts by linking to a CSS stylesheet containing the @font-face information. That means leaving your fonts in another file hosted on your own server or on your chosen web font server such as Google fonts. Both methods are well supported across the email clients that will load your custom web fonts.
@import
@import url(‘http://fonts.googleapis.com/css?family=Open+Sans’);
<link>
<link href=”http://fonts.googleapis.com/css?family=Open+Sans” rel=”stylesheet” type=”text/css”>
The third method brings the CSS into your HTML file in a style block. This gives the most granular approach to bringing fonts into your email, with the file directly loading from your email’s HTML, rather than loading from an external stylesheet. This has some performance improvements, along with the ability to choose which font; style, weight and file type to download.
@font-face
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
Src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format(‘woff2’);
}
Think of the @font-face method as a direct-to-the-source sort of method of importing your web fonts. It can be more reliable to import the web font directly from the source as you can choose which format of web font you want to import. Especially if you’re given a choice, which some web font suppliers do have.
In the example above the WOFF2 font format has been imported, which is considered to be the most widely supported of font formats for email.
Finding this information on Google fonts can be tricky, but follow these steps to find the font you’re after. At https://fonts.google.com/ search for your chosen font and add it to your selection by hitting the ‘+ Select this style’ link.
The selected style will be added to your ‘Selected Family’.
Choose ‘Embed’ and you will get the information you need to link your font.
You can also choose @import – to show it in this style if preferred.
To get the @font-face information for your specific font choice, you need to highlight and copy the link to the CSS file: https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap.
Paste this link into your browser and you will see the range of fonts that are downloaded by your email client if you link or import this stylesheet:
To improve the load time of your email and also only import the specific font you want to use, find the /* latin */ version with the woff2 file format:
/* latin */
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(‘Open Sans Light’), local(‘OpenSans-Light’), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Some of the attributes included in this @font-face are not supported by email clients. To reduce our file size further we can remove the unicode range, src: local and font-display information. Cutting down to the below:
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
Src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format(‘woff2’);
}
This will give your email the fastest and most direct information to download your font. However, be aware if you use this method in conjunction with Google Fonts, the URL may change in the future. It’ll be something you would need to keep an eye on. If you can host the font file on your own server, that would be best.
After you’ve imported your font using any of the above methods all you just have to add it to your font declaration:
<td style=”font-family: ‘Open Sans’, Arial, sans-serif;”>Open sans font for all!</td>
Outlook web font bug and the joy of Times New Roman
As with many things email, web fonts come with their own particularly annoying problem. In this case: Outlook 2007/2010/2013.
Oh, the joy of Outlook! There’s always one, isn’t there? Even if you’ve set your fallback font up correctly, Outlook won’t fallback to that font. Outlook will fallback to…Times New Roman. Great! Not so great if your fallback font isn’t Times New Roman.
The good news is that there’s a few workarounds for this issue.
This older fix is still valid, but involves a lot of extra code, both inline and in your <style> blocks, but isn’t to be ignored. You can embed the following code in your email:
<!–[if mso]>
<style type=”text/css”>
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]–>
Then use the class fallback-text wherever you have used your web font family like this:
<td class=”fallback-text” style=”font-family: ‘Open Sans’, Arial, sans-serif;”>Open sans font for all!</td>
What’s happening here is the CSS class is being used to target the text and serve Outlook an alternate font stack to use. You can substitute Arial for any other web safe font you would like to use.
Another method is to hide your custom web font from Outlook using the @media query:
@media {
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
Src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format(‘woff2’);
}
}
By wrapping your font inside this media query (which isn’t supported by Outlook) your custom font will be ignored, and Outlook will move down your font stack until it finds a font on the users operating system.
Lastly, you can specify a specific Windows Outlook fallback font, by including mso-font-alt in your @font-face:
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
Src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format(‘woff2’);
mso-font-alt: Arial;
}
This works because Windows Outlook still uses the Microsoft Office (mso) rendering engine to display your email and the specific mso CSS attribute tells Outlook to use Arial, or whichever your chosen web safe font is.
Choosing good fallbacks
As mentioned earlier, a fallback font is the font that is shown to the subscriber of the email if their email client doesn’t support web fonts. You need to give choosing the right fallback font some thought. Keep in mind that the fallback font needs to be a web safe font, so you’re limited in your choice.
The vertical design of your email is incredibly important, and you don’t want it to fall apart when your second or third font choice is displayed. So you need to consider is the x-height of your web font that you’ve chosen and choose a web-safe font that has a similar x-height.
The animated GIF shows three different fonts which fit incredibly well together, in terms of their x-height. While Verdana does have an overall greater size, the x-height is similar to the other fonts. So vertical spacing of your email will be fine.
Another font attribute to consider is letter-spacing to ensure line length doesn’t change dramatically.
Consider if the feel of the fallback font is similar to your web font. If your web font is a serif font (like Times New Roman), you need to make sure you choose an appropriate serif font as a fallback. And the same if you’ve chosen a sans-serif font (like Arial). This ensures that the overall look and feel of your email doesn’t change if the web font is used or fallback font. You need to keep the design of your email consistent from client to client.
Where to get web fonts
One of the most popular and easy to use sources of web fonts is Google Fonts (https://fonts.google.com).
While you won’t find some of the more popular fonts here, you will find great alternatives. Which are available for free. Yes, you won’t have to pay to use any of the Google web fonts in your emails. You can also download any of the fonts on Google Fonts to your computer so you can use them when you design your email.
Other paid for services are also available. Below is a list of web font services which house web fonts licensed for use in email. (More on licenses below.)
MyFonts
Commercial
FontSpring
Typotheque
Process Type Foundry
Production Type
YouWorkForThem
Village
FontShop
Licensing
A license is required to legally use a web font online. As web fonts have been used on websites for a few years, licensing is already in place that covers use on websites and even mobile apps.
However, licensing for use in email isn’t quite as widespread. This is because the use of web fonts in email is often seen as redistributing the font. And for many web font services, this goes against their EULA (End User License Agreement).
Most licenses for use of web fonts in email are based on the number of monthly opens. Something to consider if you’re using a paid for web font in your emails.
Always test your web fonts
Different email clients will render a web font very differently from one another. Careful selection of a font should be considered, as some typefaces that are not as well designed as they should be can render poorly in certain email clients. Testing your emails is a good way to avoid that and might influence the selection of one font over another.
If you test your fonts and find they don’t work, you luckily have options. You might consider changing to a web safe font or design an image with the specialized font you want to use.
In other words, testing can help you get creative so your users still have a great experience. If you use Campaign Monitor, the platform lets you effortlessly test email campaigns before sending to ensure they look great and your fonts perform as expected.
Wrap up
Unless you’re stuck with strict brand guidelines which dictate which fonts you can use in your email designs, you should feel free to start implementing web fonts. Using any one of the many free and paid for services available, it’s easy to get your emails set up with web fonts.
Bear in mind the costs of licensing specific web fonts, or there’s always the option of using free web fonts from Google Fonts. Don’t forget to have your fallback fonts in place, as it may be that the majority of your subscribers will see this font rather than your web font.
Think of web fonts as a nice-to-have in your email campaigns. An added bonus for those subscribers who are able to see them, and a way of pushing your email into the future, one step at a time.
Creating a beautiful email with modern web fonts is easier than ever before and with some simple testing and good fallback fonts, your email can look great in every email client.
The post All You Need to Know About Web Fonts in Email appeared first on Campaign Monitor.