Typography in email marketing is a compromise between design and email client limitations. Unlike the web, where browsers support standards, email clients (especially Outlook and older versions of Gmail) run on archaic rules.

In this article, we'll break down the technical side of typography: how to set up a font stack, which hacks to use for Outlook, and how to preserve your brand style without breaking the email.

System (Web Safe) and Custom (Web) Fonts: The Basics of Choosing

First, it's important to split fonts into two categories to define your coding strategy.

Web Safe Fonts (System) These are standard fonts preinstalled on most devices (Windows, Mac, iOS, Android).

  • Examples: Arial, Verdana, Georgia, Times New Roman, Courier New, Tahoma.
  • Advantage: They'll render for 99% of users.
  • Disadvantage: May not match your brand book.

Web Fonts (Custom) These are fonts loaded from a third-party server (Google Fonts, Adobe Fonts, or your own hosting).

  • Examples: Roboto, Open Sans, Proxima Nova, and your own corporate fonts. (You can pick and test fonts on Google Fonts)
  • Advantage: A unique, recognizable design.
  • Disadvantage: Not supported everywhere. Apple Mail and iOS will show them, but Outlook and desktop Gmail will often ignore them.

Rule: Don't use more than two different fonts and two styles (Normal/Bold) in one email, since this affects load speed.

If you need specific pairings and examples of safe options, we've collected them in a separate article: "Top Best Fonts for Website and Email Design in 2026".

The Art of the Font Stack: A Fallback Rendering Mechanism

A common mistake is specifying only one desired font in CSS. If the email client can't find it, it'll fall back to its default (e.g. Times New Roman), which throws off your layout.

The solution is a font stack. This is a priority chain set in the font-family property.

Correct syntax

CSSfont-family: 'Open Sans', Helvetica, Arial, sans-serif;

The logic of the stack:

  • 'Open Sans' — The target font (a web font). If the email client can load it, the user sees it.
  • Helvetica — Fallback #1. If Open Sans doesn't load, the system looks for Helvetica (available on every Mac).
  • Arial — Fallback #2. If Helvetica isn't available (e.g. on Windows), Arial is used.
  • sans-serif — The universal category. The last line of defense. It tells the system: "Use any available sans-serif font."

The risk of layout shift

An important point: character width. Imagine: your brand font is narrow (any Condensed font). A heading fits on one line. Verdana is set as the fallback, and it's wide.

Result: In Outlook, Verdana replaces your font, the text gets wider, and the heading breaks into two lines.

Tip: Choose fallback fonts with proportions close to your main font. (For help picking fonts and generating @font-face code, you can use Font Squirrel.

  • For narrow sans-serifs, use Arial Narrow as a fallback.
  • For wide ones — Verdana.
  • For classic serif fonts — Georgia.

The technical implementation of web fonts

If you've decided to implement your brand style via a Google Font, it's important to do it correctly.

For email, @font-face works best. The <link> and @import methods are often blocked by email clients. @font-face gives you control and lets the font stack correctly fall back if the font isn't supported.

Sample code (inserted in the email's <head>):

HTML<style type="text/css"> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); mso-font-alt: 'Arial'; /* Specifies an alternate font for Outlook */}.body-text { font-family: 'Roboto', Arial, sans-serif;}</style>Where it works:

Where it works:✅ Apple Mail (iPhone, iPad, Mac)✅ The standard Android email client (not the Gmail app)✅ Thunderbird

Where it (most likely) won't work:

❌ Gmail (web and app) — often ignores external links, replacing the font with Roboto or Arial.❌ Outlook (Desktop) — completely ignores @font-face.

Overcoming Outlook's limitations: hacks and mso tags

Outlook for Windows (versions 2007–2019) uses the MS Word engine to render emails. That's exactly why Outlook is the main obstacle in email coding. It may ignore your font stack if it sees an "unrecognized" custom font and force Times New Roman instead.

Solution 1: the mso-font-alt directive

This is a Microsoft CSS property that lets you specify an alternate font specifically for the Office engine. Add it right inside the @font-face declaration: mso-font-alt: 'Arial';

Solution 2: conditional comments (the reliable method)

This method hides the custom font from Outlook, forcing it to see only the safe one.

CSS with Outlook protection: Add this code inside the <style> block.

CSS/*<![endif]—>*/

How it works: Every email client will skip this code as a comment. But Outlook will see the [if mso] condition, apply it, and force (!important) Arial onto every element.

Apple users will see Lobster, while Outlook users will see Arial, which rules out the forced fallback to Times New Roman.

Readability and UX: key technical parameters

Even with a technically correct setup, typography can still fail to deliver. Typography is a tool for delivering meaning.

Check your email against this checklist:

  • Font size.
    • Desktop: at least 14–16px for body text.
    • Mobile: 16–18px. Small text is hard to read on a smartphone.
  • Line spacing (line-height).
    • Standard: 1.5 (or 150%). If the text is 16px, line height should be 24px. Cramped lines make text harder to read.
  • Contrast.
    • Light gray text on a white background is hard to read. Use dark gray (#333333) or black. (You can check contrast against WCAG standards with the WebAIM Color Contrast Checker.)
  • Avoid using text as an image.
    • Risks: Images may be disabled by default. The email could get flagged as spam. The image won't adapt to a mobile device's width.
    • If you do use it: Always add alt text.

Summary: 5 rules of email typography

  1. Always have a backup plan (Plan B). Use a font stack: first your brand font, then a similar safe font, and finally a universal category (sans-serif or serif).
  2. Pick a similar fallback font. It should be close to your main font in character width. If your main font is narrow, don't set a wide one as the fallback — it'll throw off the layout.
  3. Load your custom font reliably. Use the @font-face method inside the email's styles. Avoid @import and external links, since email clients block them.
  4. Account for Outlook. Use special commands (hacks) to force this client to show a safe system font (e.g. Arial) if your brand font doesn't work.
  5. Test before sending. Always check how the email looks across all key email clients, especially desktop Outlook and mobile Apple Mail.

In the end, your brand style is a brand asset. In email marketing, you can only preserve it by controlling the font the recipient actually sees.

In the latest version of Letteros, we've eliminated this technical headache:

  • Automatic font stacks: Popular fonts in the builder come with built-in, tested font stacks that account for character metrics.
  • Built-in mso hacks: The builder automatically adds the technical workarounds needed so emails look right in Outlook.
  • One-click testing: You can check how the email renders across 100+ devices and email clients, including Outlook versions.

Ready to roll out your brand style with reliable rendering guaranteed? Go to the Letteros builder right now to test how your fonts perform in our environment.

Попробовать Letteros бесплатно