EMAIL DESIGN & TYPOGRAPHY

Email Typography Best Practices: Web Safe vs. Custom Fonts

17 May 2022

Typography is a fundamental element of brand identity and user experience. In email marketing, however, consistent font rendering across the fragmented landscape of email clients presents a significant challenge. Choosing the right fonts—and implementing them correctly—is crucial for maintaining brand integrity, ensuring readability, and maximizing campaign effectiveness. This guide covers the essential best practices for using web-safe and custom web fonts in your emails.

Email Typography Best Practices: Web Safe vs. Custom Fonts

Why Font Choice Matters in Email

Your choice of font impacts more than just aesthetics:

  • Brand Consistency: Using your designated brand fonts reinforces identity and professionalism.

  • Readability & Accessibility: Clean, legible fonts improve the user experience, especially on mobile devices, and are crucial for accessibility.

  • Engagement: Poor font rendering can lead to broken layouts or unreadable text, causing frustration and potentially impacting click-through rates (negatively, if fallback issues occur).

 

Understanding the Font Types

There are two main categories of fonts used in HTML email:

 

1. Web Safe Fonts

  • What They Are: A limited set of fonts pre-installed on the vast majority of operating systems (Windows, macOS, iOS, Android).

  • Why Use Them: Their primary advantage is near-universal compatibility. You can be highly confident they will render correctly for almost every recipient.

  • Common Examples: Arial, Helvetica, Times New Roman, Georgia, Verdana, Trebuchet MS, Courier New.

  • The Downside: The selection is limited, potentially restricting brand expression. Some universally available fonts, like the infamous Comic Sans, have a troubled history. Released with Windows 95, its quirky, informal style led to massive overuse in inappropriate contexts. Poor typographic quality (like inconsistent kerning) also made it a long-standing subject of derision among designers. While technically "web safe," it's generally avoided in professional business communications.

 

2. Custom Web Fonts

  • What They Are: Fonts that are not pre-installed on user devices but are loaded via the web, typically hosted by services like Google Fonts or commercial font foundries (e.g., Adobe Fonts, MyFonts), or self-hosted.

  • Why Use Them: They offer a vastly wider range of typographic options, allowing for precise brand alignment and unique design aesthetics.

  • The Challenge: Inconsistent Support: While support has improved significantly, custom web fonts are not universally supported across all email clients.

    • Good Support: Apple Mail, iOS Mail, Outlook.com, Outlook for Mac, some versions of Gmail.

    • Limited/No Support: Many versions of Outlook for Windows (desktop), some Android mail apps, Yahoo Mail.

  • Crucial Implication: When a web font isn't supported, the email client will fall back to a default font (often Times New Roman) unless you specify alternatives.

 

Implementation: How to Code Fonts in Email

Regardless of the font type, proper implementation is key.

Defining Fonts: CSS is Key

Font definitions belong in CSS, either inline or within a <style> block in the <head>.

  • Inline Styles (for Web Safe Fonts & Basic Styling): Apply font-family, font-size, color, line-height, etc., directly on <td> or <a> tags for maximum compatibility.

    HTML
    <td style="font-family: Georgia, Times, serif; font-size: 16px; line-height: 24px; color: #333333;">Your email copy here.</td>

  • <style> Block (for Web Font Loading & Fallbacks): Web fonts must be loaded using @import, <link>, or @font-face rules within a <style type="text/css"> block in your email's <head>. @font-face offers the most control over file formats (.woff is generally preferred for email).

    HTML
    <style type="text/css">
  @import url('https://fonts.googleapis.com/css?family=Roboto'); /* Example using @import */

  @font-face { /* Example using @font-face */
    font-family: 'Your Custom Font';
    font-style: normal;
    font-weight: 400;
    src: url(https://yourserver.com/your-custom-font.woff) format('woff');
  }
</style>

 

The Critical Importance of Fallback Fonts

Because web font support is inconsistent, you MUST define fallback web-safe fonts in your font-family CSS declaration. The email client will attempt to render the fonts in the order listed.

CSS
/* Good font stack: Custom Web Font -> Common Sans-Serif -> Generic */
font-family: 'Roboto', Arial, Helvetica, sans-serif;

If 'Roboto' isn't supported, the client will try Arial, then Helvetica, then a default sans-serif font.

 

Overcoming the Outlook / Times New Roman Problem

Outlook desktop versions (using Word's rendering engine) are notorious for ignoring specified fallbacks and defaulting to Times New Roman. Use MSO conditional comments in your <head> to force a specific web-safe font for Outlook:

 

Styling ALT Text

Don't forget ALT text for images. You can apply font-family, font-size, and color styles directly to the <img> tag to make the ALT text more visually appealing and on-brand when images are blocked.

HTML 
<img src="logo.png" alt="Your Company Logo" style="font-family: Arial, sans-serif; font-size: 14px; color: #555555; font-weight: bold;">

 

Testing is Non-Negotiable

Given the inconsistencies, you must test your emails using preview tools like Litmus or Email on Acid. These services show how your fonts (and the rest of your email) render across dozens of real email clients and devices, allowing you to catch and fix issues before sending.

 

Conclusion: Prioritize Readability and Consistency

While custom web fonts offer exciting design possibilities, their inconsistent support requires careful implementation with robust web-safe fallbacks. Prioritize readability and brand consistency above all else. Define clear font stacks, use MSO conditionals for Outlook, style your ALT text, and test relentlessly. By mastering these techniques, you ensure a professional and legible experience for every recipient, regardless of their email client (and avoid any Comic Sans mishaps!).


Show more