Type scale

Display large

Display – large sets the visual tone and should be reserved for the most prominent message in your email. Use a strong contrasting colour and ensure ample spacing around the text for readability across screen sizes.

Use sparingly for high-impact announcements or campaign headers.

Display medium

Display – medium supports hierarchy while maintaining balance within the layout. Avoid using it too frequently to prevent visual clutter.

Ideal for section introductions or featured content.

Display small

This size provides distinction without overpowering body text. Use it to lead into secondary content or highlight a quote or key takeaway. It can also provide emphasis within content blocks or callouts.

Headline large

Headline – large is typically used at the start of a main section. Ensure it follows logical hierarchy and avoid using more than once per screen.

It is used as the primary heading style for structuring long-form email content.

Headline medium

Headline – medium creates clear breaks between content areas and supports scannability, particularly on mobile.

It is used for sub-sections within the email layout.

Headline small

Use this for nested content (content placed within another content block), or to label grouped items like FAQs or linked resources. It maintains clarity while providing strong typographic contrast from body copy.

Body large

Designed for introductory text or summary paragraphs at the top of an email. This size supports easier reading on all devices and works well in accessibility-first layouts.

Body

Default size for general copy across the email. Body style ensures legibility and supports screen readers. Maintain line height around 1.5 for optimal readability and use left alignment.

Body small

Used for less prominent content such as disclaimers, footnotes or supporting details. Avoid using small text for important messages or links, especially in mobile view.

Body extra small

Reserved for legally required content or technical metadata in the email footer. Always check contrast and avoid placing on dark backgrounds unless WCAG contrast is met.

Label small

Use for UI elements such as buttons, tags or field labels. Labels should remain short and functional, and text must be clear when viewed at smaller resolutions or in dark mode.