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
Related Glossary Terms
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Attachment
An email attachment is a file sent along with an email message — while common in personal and business correspondence, attachments are generally discouraged in marketing emails due to security, deliverability, and compatibility concerns.
Email Body
The email body is the main content area of an email message, containing the visible text, images, and structural elements that communicate the message to the recipient.
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.