Definition
A font stack is a comma-separated list of font families specified in CSS, ordered by preference. The email client attempts to use the first font in the list; if it is not available, it moves to the next, and so on until it finds an available font. This ensures text displays in a reasonable typeface regardless of the recipient's device or email client.
A well-constructed font stack for email includes: the preferred font (often a web font), a close system-font alternative, and a generic fallback (serif or sans-serif). The generic fallback ensures the email always has some text rendering, even if no specific fonts match.
Common Email Font Stacks
| Stack Type | Example | Use Case |
|---|---|---|
| Sans-serif (web font) | 'Open Sans', Helvetica, Arial, sans-serif |
Modern brands |
| Sans-serif (system) | Helvetica, Arial, sans-serif |
Safe fallback stack |
| Serif (web font) | 'Merriweather', Georgia, 'Times New Roman', serif |
Editorial content |
| Monospace | Courier, 'Courier New', monospace |
Code snippets |
| Clean modern | 'Inter', 'Segoe UI', Roboto, sans-serif |
Modern apps |
Best Practices
- Always end your font stack with a generic fallback (serif, sans-serif, or monospace)
- Place web fonts first, followed by system fonts and the generic fallback
- Test your font stack in the email clients your audience uses most
- Use font stacks that include fonts installed on Windows, macOS, iOS, and Android
- Avoid obscure or rarely-installed fonts in your stack
- Quote font names with spaces or special characters (e.g., 'Times New Roman')
- Keep font stacks to 4–5 fonts maximum for readability
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
Helvetica, Arial, sans-serif is the safest sans-serif stack — both are available on virtually every device and email client. For a serif alternative, use Georgia, 'Times New Roman', serif. These stacks ensure consistent rendering across all platforms without relying on web fonts.
Use a web font as the first entry in your font stack (`@import` or `@font-face` in the email's styles), followed by your brand's closest system-font match, then a generic fallback. Clients that support web fonts will use your brand font; others will render the fallback.