8 minute read time
Email-Friendly Web Fonts from a Designer’s Perspective
Every email’s success hinges on the design displaying correctly.
Over 70% of people will delete an email in three seconds or less if it doesn’t display correctly on their device—whatever that device may be. Another 15% of people will just unsubscribe instead of deleting the email.
If your responsive email design isn’t completely on-point, you’re leaving an 85% chance of losing valuable leads and customers forever.
Many marketers may not realize an important fact: There’s more to responsive mobile design than photos and columns. Even something that seems simple (e.g. font style) plays a huge role in whether or not your email renders correctly.
In this post, we’ll go over the pros, cons, and best practices to using web fonts in your email designs.
Web fonts vs. web safe fonts: what’s the difference?
It’s easy to get confused here, so let’s establish an essential difference between web fonts and web safe fonts. While there is some overlap in the type of font styles in each set, web fonts (WFs) and web safe fonts (WSFs) are not the same.
From a responsive designing perspective, WFs and WSFs function very differently when they communicate with email clients, web browsers, and devices.
Web-safe fonts
For many years, using a traditional font style was the only way to ensure your online content was correct on all devices. During this time, you had to use a font style that every device could access.
That’s right: web safe fonts come preinstalled on just about every computer, laptop, tablet, and phone you’ll ever use. Designers feel comfortable using WSFs because they know every device will display them correctly. Plenty of huge companies like American Apparel and target still use WSFs—in short, these fonts continue to be dependable.
Web fonts
Web fonts, on the other hand, don’t come installed on devices. Instead, websites and email clients pull them from data on the internet. The information required to process WFs can often come pre-installed on browsers for easy access, or it can be downloaded behind-the-scenes as your device renders a web page or email.
With a WF, designers know they run the risk of a browser or email client not displaying their typeface properly. When using a font style in this category, you always take a small risk of sacrificing readability for creativity.
Why does it matter?
It may seem banal, but there’s actually a lot riding on which font style you choose for your email campaigns and landing pages. You want to stay consistent with branding and the fonts on your website.
However, your emails also need to be accessible for everyone—including people with vision disabilities. Marketers will need to decide which tradeoff to make, and they’ll need a thorough understanding of their audience segments before deciding whether to use WFs or WSFs.
The pros and cons of using web fonts
You already know that web safe fonts are the holy grail of consistency and accessibility (if that’s your priority), but what about web fonts?
How can you nail down the best choice? Let’s weigh the pros and cons of WFs.
Pro/con: most email clients support them, but there’s one massive exception
We talk a lot about the importance of researching your audience, but that’s because it matters. In the case of WFs, research the email clients your subscribers use. By doing this, you can give yourself a clear answer on whether or not you should use web fonts.
Most clients support them including
- IOS Mail
- Apple Mail
- Android
- Outlook.com app
- Outlook 2000
- Thunderbird
Notice anything about that list?
Gmail, which makes up about 28% of the current market share, does not support all WFs. That doesn’t mean Gmail can’t work for you: In fact, Gmail now supports a handful of WFs—Google Sans, Roboto, Roboto Draft, and Sans-serif—so you do have a few options. However, it’s good to carefully select the WFs you do use.
Pro: you can match your brand’s logo and graphics
The biggest bonus of using WFs is the ability to match your current branding. Brand recognition is vital, so it makes sense for emails and sites to feature consistent font and design. Plus, familiarity is essential to trust-building and customer conversion.
Pro: you can select a “Plan B” font style
You don’t have to worry too much about web font support because most email service providers let you select an emergency backup font style. This keeps your email from displaying blocks or negative space.
Con: they may not look quite the same
When an email client renders your campaign, a WF may not look quite the same. This is especially true if you choose a newbie web font over a tried-and-true option, like Roboto.
Con: they may not be easy to read
From both a UX and accessibility perspective, every single font style has its own set of pros and cons. Verdana, for example, is considered easy to read while many claim Helvetica is more difficult, because the letters are spaced close together. Although Verdana and Helvetica are web safe fonts, you run an even higher risk of choosing less established web fonts.
Best practices for using web fonts
When it comes to best practices for WFs, the little things make the biggest impact. These will dictate whether or not people will be able to read your emails.
Understand (and segment) your audience
When choosing a font style, determine which email clients your subscribers use. Who knows, 80% of your subscribers could be iPhone users, and web safe fonts might work for them.
With this information, you’ll have the data you need to design emails that look perfect on their devices. You could also offer a web font version for younger readers with better eyes and a web safe font version for older demographics.
Pay particular attention to size
When working with WFs, it’s a good idea to pay close attention to the sizes of your headings and copy. WFs with large spaces between letters may look huge on mobile devices. Other fonts with minimal spacing could be almost impossible to read.
Although these headings use a complicated font style, it’s large enough to be legible.
Source: Really Good Emails
Choose an appropriate fallback font
If things don’t work out, most email providers have their own emergency font style to compensate.
- Apple: Helvetica
- Gmail: Arial
- Outlook: Calibri
Notice anything? These fonts are all vastly different. Helvetica is bold, Arial has somewhat narrow spacing, and Calibri is sophisticated. Your emails could look totally different if you don’t choose a backup web safe font.
The most important thing to consider when choosing a fallback font is the height, because this will impact the appearance of your entire email. See how different fonts display with similar heights in this GIF:
Source: Campaign Monitor
You also have to consider the overall aesthetic. If you initially chose a sans-serif web font like Roboto, you probably wouldn’t want to select a serif web safe font like Times New Roman, because it just wouldn’t feel right.
Make good use of multimedia instead
You could ditch the web safe fonts entirely and stay on-brand with multimedia instead. With GIFs and graphics, you can play around with any (legible) font you please without worrying about email client support.
The only catch: whether or not the subscriber allows images to display.
This email from Aweber uses a unique cursive font in a holiday GIF. Even though the font probably won’t display in an email client, it shows up fine in the GIF. Since it’s well-spaced and bold, it’s still very legible.
Source: Really Good Emails
Get started with Google fonts
Ironically, while Gmail doesn’t support most WFs, Google does offer a wide range of free WFs. Most WFs are licensed, so it’s crucial you do your research before picking a web font for your emails.
Source: Google Fonts
Provide a web link
When you design your emails, include a link that allows subscribers to view your email in a web browser. This will give you more control over whether or not they’ll be able to see your web font (or images). At the same time, you have to bank on them clicking the link.
Notice how the “Shop Women | Shop Men” links in this Lululemon email displays Arial inside the Gmail inbox but a different font in the web browser.
Source: Lululemon
Test, test, test
You won’t know if your font looks correct on Gmail, Apple, or Yahoo until you run a test for each. After you design your campaigns, run a test for all the email clients your subscribers use, paying particular attention to mobile.
Wrap up
While most email clients support web fonts, Gmail’s support is still extremely limited. Still, whether or not a client supports WFs is only half the equation. You still need to balance your audience and their accessibility while trying to keep your branding consistent.
Do you need help designing stunning emails with a font style that looks incredible in every email client? Check out how our customizable template builder works to get started.
