Font stack

A font stack is a list of fonts defined in order of preference, used to control how text appears when the preferred font isn't available. In HTML emails, getting the font stack right is essential—many email clients don't support web fonts, so fallback options ensure your message stays readable and on-brand across all devices and platforms.

Preferred font: Public Sans

The NSW Government uses Public Sans as the primary typeface for all digital communications, including email templates. This open-source, sans-serif font is designed for clarity and accessibility across various devices and screen sizes.

Where email clients support web fonts—such as Apple Mail on iOS—Public Sans will load. For clients that don't support web fonts, like Microsoft Outlook for Windows, fallback fonts are used to maintain a readable and professional appearance.

Fallback font stack

In the compiled HTML, use this fallback font stack:

"Public Sans", system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"

This order prioritises readability across platforms:

system-ui: Uses native UI fonts like San Francisco (Apple) and Segoe UI (Windows)
Common sans-serifs: Helvetica and Arial
Generic fallback: sans-serif
Emoji support: Includes emoji fonts for cross-platform consistency

Microsoft Outlook compatibility

Outlook for Windows does not load web fonts. To avoid the fallback defaulting to Times New Roman, we add an MSO-only style that forces a safe sans-serif fallback stack (Arial, Helvetica, "Segoe UI") to avoid Times New Roman fallbacks.

<!--[if mso]>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 { font-family: Arial, Helvetica, "Segoe UI", sans-serif; mso-line-height-rule: exactly; }
  </style>
<![endif]-->

This ensures consistent rendering for users with Microsoft Outlook on Windows.

Example: inline style for content cells

In the compiled HTML examples, text blocks use a fallback chain so copy stays readable when web fonts are not loaded:

<td style="font-family:'Public Sans', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';">
  …
</td>

This inline declaration also ensures that even if the client strips <head> styles, text remains legible and on-brand.

Practical tips

Don't rely on web fonts: Expect many clients (especially Outlook for Windows) to ignore web fonts; rely on the fallback chain for a consistent look.
Follow the font stack order: This ensures each platform uses its native UI font first, followed by commonly available fonts.
Include emoji fonts: These maintain visual consistency in emails containing emojis.
Test your emails: Always check rendering in Outlook, Apple Mail and Gmail to confirm visual consistency.