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 system UI fonts 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 Helvetica or Arial 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 Toolkit defines default unitless line-height ratios based on pixel targets. Use these as starting points when creating custom styles.

Display text

Style	Font size (px)	Line height
display-lg	64 → 80	1.25
display-md	48 → 64	1.33
display-sm	36 → 48	1.33

Headings

Style	Font size (px)	Line height
headline-lg	30 → 40	1.33
headline-md	24 → 32	1.33
headline-sm	20 → 28	1.4

Body text

Style	Font size (px)	Line height
body-lg	18 → 28	1.56
body	16 → 24	1.5
body-sm	14 → 20	1.43
body-xs	12 → 16	1.33

Smaller text and longer lines benefit from more vertical space.

Important: If you adjust font sizes, keep body line height between 1.45 and 1.6, and headings between 1.25 and 1.35.

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 Helvetica 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.

Command Palette