Email Safe Fonts and HTML Email Font Best Practices
You’ve all heard my complaints on the lack of advancements in email support over the years so I won’t spend (too much) time whining about it. I only wish that one large email client (app or browser), would break out of the pack and try to fully support the latest versions of HTML and CSS. I have no doubt that tens of millions of dollars are being spent by companies to fine-tune their emails.
That’s why it’s fantastic to have companies like Uplers who stay on top of every aspect of email design. In this latest infographic, the team walks you through typography and how different fonts and their characteristics can be deployed to customize your emails.
Using Custom Fonts in Email
Using external fonts can be a bit more challenging than in standard web design due to the varying support across email clients. However, it’s still possible to incorporate external fonts into your emails for those clients that support them, while providing fallback fonts for those that do not.
60% of email clients now support custom fonts utilized in your email designs including AOL Mail, Native Android Mail App (not Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com, and Safari-based email.
Uplers
A fallback font is a backup font that the email client can display in case it cannot render the primary (external) font. This ensures that your email remains readable and maintains its intended appearance as closely as possible across different viewing environments.
- Choose Your External Font: Select an external font you wish to use. This could be from a service like Google Fonts or a font hosted on your web server.
- Include the Font in Your Email HTML: For email clients that support it, you’ll link to the external font in the
<head>of your email HTML. However, many email clients do not allow linking to external resources for security reasons. Instead, you may include the font as a link in hopes that webmail clients that allow external links will render it. - Specify Fallback Fonts: Choose web-safe fallback fonts that are similar in appearance to your external font. These should be generic font families pre-installed across most devices and operating systems.
- Use Inline CSS for Style Definitions: Due to the limited CSS support in many email clients, it’s best practice to use inline CSS to define your styles, including font families.
Example:
Suppose you want to use the external font Open Sans from Google Fonts, with Arial and sans-serif as fallbacks. Here’s how you might attempt it:
<!DOCTYPE html>
<html>
<head>
<title>Email with External Font</title>
<!-- Attempt to include external font - not supported by all email clients -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
</div>
</body>
</html>Important Considerations:
- Email Client Support: Many email clients, especially desktop ones like Microsoft Outlook, do not support external fonts. Web-based clients like Gmail have better support, but limitations still exist.
- Fallback Fonts: These are crucial for ensuring your email remains functional and aesthetically pleasing across all clients. The sequence in the
font-familystyle goes from the most preferred font to the least, ending with a generic family (sans-seriforserif). - Testing: Always test your HTML emails across various email clients to see how they render. Tools like Litmus or Email on Acid can help with this.
For sales and marketing emails, the visual appeal can significantly impact the message’s effectiveness. While using a unique external font can help your emails stand out, it’s essential to ensure your fallback fonts maintain the professional and readable qualities necessary for your message to be effectively received.
There are 4 Font Types Used in Email
- Serif – Serif fonts have characters with flourishes, points, and shapes on the ends of their strokes. They have a formal look, well-spaced characters and line spacing, greatly improving readability. The most popular fonts in this category are Times, Georgia, and MS Serif.
- Sans Serif – Sans serif fonts are like the rebellious kind who wish to create an impression of their own and don’t have any fancy embellishments attached. They have a semi-formal look, which promotes practicality over looks. The most popular fonts in this category are Arial, Tahoma, Trebuchet MS, Open Sans, Roboto, and Verdana.
- Monogram – Inspired by the typewriter font, these fonts have a block or ‘slab’ at the end of the characters. Though rarely used in an HTML email, most ‘fallback’ plain text emails in MultiMIME emails use these fonts. Reading an email using these fonts gives an administrative feeling associated with government documents. Courier is the most commonly used font in this category.
- Calligraphy – Imitating the handwritten letters of the past, what sets these fonts apart is the flowing movement that each character follows. These fonts are pretty fun to read in a tangible medium, but reading them on a digital screen can be rather cumbersome and eye-straining. So, such fonts are mostly used in headings or logos as static images.
Email-safe fonts include Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet, and Verdana. Custom fonts include quite a few families, and for the clients that don’t support them, it’s necessary to code in fallback fonts. This way, if the client can’t support the customized font, it will fallback to a font that it can support.
Arial
font-family: Arial, sans-serif;Georgia
font-family: Georgia, serif;Helvetica
font-family: Helvetica, sans-serif;Lucida
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; Tahoma
font-family: Tahoma, Geneva, sans-serif;Times
font-family: 'Times New Roman', Times, serif;Trebuchet
font-family: 'Trebuchet MS', sans-serif;Verdana
font-family: Verdana, Geneva, sans-serif;For a more in-depth look, be sure to read Omnisend’s article:
Email Safe Fonts vs. Custom Fonts: What You Need To Know About Them
Be sure to click through if you’d like to interact with the infographic.
