Email Typography

Definition

Typography in email design refers to the selection, arrangement, and styling of typefaces used in email communications. Unlike web design, where custom fonts can be reliably served via web fonts, email typography is constrained by the limited font rendering capabilities of email clients. Most email clients do not support custom font loading through @font-face or @import rules reliably, and those that do present inconsistent rendering across versions and platforms. As a result, email designers rely on a curated set of web-safe fonts — typefaces that are installed on nearly all devices and render consistently across email clients. The primary web-safe fonts for email are Arial, Helvetica, Georgia, Times New Roman, Verdana, Trebuchet MS, and the monospace family Courier New. These fonts appear consistently across Outlook, Gmail, Apple Mail, and other major clients.

Font stack hierarchy is the technique of listing multiple fonts in order of preference, providing fallbacks in case the preferred font is not available. A typical font stack begins with a preferred custom or web-safe font, followed by a similar fallback, and ends with a generic category such as serif, sans-serif, or monospace. For example: font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif. The stack ensures that the email renders legibly regardless of the recipient's installed fonts. Custom fonts applied via CSS @import or @font-face rules work in Apple Mail and some newer versions of Outlook for Mac and iOS Mail, but they do not work in the dominant webmail clients — Gmail, Outlook.com, and Yahoo Mail — or in the desktop version of Outlook for Windows, which uses Microsoft Word's rendering engine.

Font size recommendations for email follow established readability guidelines. Body text should be set at 14px to 16px, with 16px preferred for longer-form content and mobile readability. Heading sizes should range from 22px to 28px, with a clear visual hierarchy differentiating H1, H2, and H3 levels. Line height should be approximately 1.5 times the font size for body text — 24px for a 16px font — to provide comfortable reading spacing. These recommendations align with WCAG accessibility guidelines, which also require that text can be resized up to 200% without loss of content or functionality. Fallback fonts must be chosen with similar proportions to the preferred font to prevent layout breaks when the fallback is rendered instead.

Best Practices

Use a font stack that includes at least three levels of fallback: a preferred font, a similar web-safe font, and a generic category. Test the appearance with each fallback font to ensure the layout does not break when the preferred font is unavailable.

Set body text at a minimum of 14px, with 16px recommended for primary content. Smaller text sizes reduce readability, particularly on mobile devices and for subscribers with visual impairments. Never use font sizes below 12px for any content that contains essential information.

Use a line height of 1.4 to 1.6 times the font size for body text. Tighter line heights reduce readability, especially in paragraph-length content. Looser line heights waste vertical space without improving readability beyond 1.6x.

Limit the number of typefaces in a single email to two — one for headings and one for body text — plus a possible third for special purposes such as quotes or data. More than three typefaces creates visual noise and increases the risk of inconsistent rendering across fallback scenarios.

Test email rendering with fallback fonts active by removing the preferred font from the stack during testing. The layout should remain functional and visually coherent even when every subscriber receives the lowest-priority fallback.

Avoid using custom fonts via @import or @font-face as the primary method for critical text content. Use custom fonts as progressive enhancement — they are a nice addition for supporting clients but should not be relied upon for readability or brand recognition.