Line height

Line height controls the vertical spacing between lines of text. In the NSW Design System email framework, we use unitless line-height ratios to ensure text scales with font size and remains consistent across fallback fonts. This is especially helpful in email clients like Outlook on Windows, which often ignore web fonts and default to Segoe UI or Arial.

Using unitless values also improves mobile readability and reduces inconsistencies between email clients.

Quick guide

• Use unitless line-height values.
• Keep body text between 1.45 and 1.6.
• Keep headings between 1.25 and 1.35.
• Test small text (12–14 px) in Outlook carefully.

Why use unitless line height

Scales with font size

A unitless value like line-height: 1.5 works whether the text is 14 px or 18 px.

Improves fallback consistency

If Public Sans doesn't load, fallback fonts like Segoe UI, Arial or Roboto still display with balanced spacing.

Avoids layout issues

Keyword values like normal vary by font, and fixed pixel values can clip in Outlook.

Recommended line-height values

The NSW Email Design System defines default unitless line-height ratios based on pixel targets. Use these as starting points when creating custom styles.

Display text

Headings

Body text

Smaller text and longer lines benefit from more vertical space.

Accessibility and readability tips

• Line height improves readability, but it's not a substitute for sufficient colour contrast. Make sure text meets WCAG 2.2 AA standards.
• Don't rely on spacing to communicate meaning—use headings, bold text (700 weight) and clear labels.
• On dense screens or for small fonts (14 px and below), increase line height before reducing font size.

Rendering notes for email clients

Outlook on Windows (Word engine)

Outlook may add extra leading or interpret unitless line heights inconsistently when web fonts fall back. To address this, the NSW Design System email framework applies an MSO-only reset that sets:

<!--[if mso]>
  <style>
    /* Applied by the framework to normalise Outlook spacing */ 
    td, th, p, a, span, h1, h2, h3, h4, h5, h6 { mso-line-height-rule: exactly; }
  </style>
<![endif]-->

This forces Outlook to use the specified line height (for example, 1.5) exactly, rather than its default “at least” setting, which can make paragraphs look too loose.

Why this matters

• Keeps headings and body copy visually consistent with Gmail, iOS and other clients.
• Reduces Outlook's tendency to add extra vertical space—especially noticeable with fallback fonts such as Segoe UI or Arial.

Things to watch

• Avoid tight line heights: always allow space for tall glyphs, diacritics and emoji. Keep body text around 1.45–1.6.
• Test small text: if you create custom tiny text (≤12–13 px), test in Outlook to ensure it doesn't clip.

Inlining and spacing

• The build pipeline inlines your line-height values on headings and body text. Combined with the MSO reset, this produces predictable spacing.
• Use bottom margins or padding (or spacer blocks) to manage vertical rhythm.
• Avoid stacking <br> tags for layout spacing.

Margin vs spacing

Many email clients collapse <p> tag margins. For consistent layout:

• Use bottom spacing utilities or spacer blocks.
• Avoid stacking <br> tags for vertical space.