Font weight

Font weight sets visual hierarchy and readability in HTML email, but support varies across clients, so choose weights that survive common fallbacks.

In the NSW Email Toolkit framework, text uses a reliable font stack: "Public Sans", system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji". This ensures emails remain readable when web fonts fail to load – as often happens in Outlook for Windows.

Font weight supports clarity and hierarchy. But support varies between email clients. Use numeric values (e.g. font-weight: 400) for better consistency across fallback fonts. Avoid using keywords like bold or normal.

Font weights in use (and why)

We use these numeric weights because they map well to common system fallbacks:

• 300 (Light) – Use only for large display text with strong contrast. Avoid at small sizes; fallbacks may render it as 400 or too faint.
• 400 (Regular) – Use for body text and longer passages. This is the most reliable weight across Outlook, Gmail and iOS.
• 600 (Semibold) – Suitable for short labels, subheads or overlines (14px and above). Some systems may render it as 700 — design accordingly.
• 700 (Bold) – Best for headings, calls to action and strong emphasis. Most consistent across all platforms.

Recommended usage by type scale

Display

• display-lg (64/80): 300
• display-md (48/64): 400
• display-sm (36/48): 400

Use 300 only for large text with strong contrast.

Headings

• headline-lg/md/sm: 700

Improves scannability and hierarchy.

Body

• body-lg (18/28), body (16/24), body-sm (14/20), body-xs (12/16): 400

Supports comfortable reading on all platforms.

Labels

• label/label-sm (14/20): 700

Accessibility and readability

• Font weight alone doesn't guarantee accessibility — ensure sufficient contrast and spacing.
• Avoid relying on weight or colour alone to convey meaning. Pair with clear wording and structural cues (like headings or spacing).

Rendering tips for email clients

• Outlook on Windows ignores web fonts. System fallbacks render 400 and 700 most reliably.
• Inline critical styles. Apply font-weight inline for headings, body, and buttons.
• For <strong> elements, keep semantic tags and also include font-weight: 700 inline.

Visual examples

Code examples