Typography

Font

Frutiger

Frutiger has been the NHS brand font since 1999. We use the web font for consistency between online and offline materials.

Email the standards team at service-manual@nhs.net for the desktop font. The web font will be part of the front-end toolkit.

Fallback font

Default to Arial when Frutiger isn't available.

font-family: “Frutiger W01”, Arial, sans-serif;

Accessibility

The body paragraph size is 19px for large screens and 16px for smaller screens, the clearest sizes to read Frutiger online.

Line height should always be 1.5 times the size of the font, meeting level AAA of the Web Content Accessibility Guidelines (WCAG 2.0).

Text styles

Headings

Open in new window
Copy
<h1 class="nhsuk-heading-xl">nhs-heading-xl</h1>
<h2 class="nhsuk-heading-l">nhs-heading-l</h2>
<h3 class="nhsuk-heading-m">nhs-heading-m</h3>
<h4 class="nhsuk-heading-s">nhs-heading-s</h4>
<h5 class="nhsuk-heading-xs">nhs-heading-xs</h5>
Open in new window
Copy
<p class="nhsuk-body">nhsuk-body</p>
<p class="nhsuk-body-s">nhsuk-body-s</p>
<p><a href="#section">Link</a></p>

We use nhsuk-body-s for:

  • page review dates
  • captions for images
  • some form elements - we're working on these

Lists

Open in new window
Copy
<ul class="nhsuk-list nhsuk-list--bullet">
  <li>The quick brown</li>
  <li>fox jumps over</li>
  <li>the lazy dog</li>
</ul>
<ol class="nhsuk-list nhsuk-list--number">
  <li>The quick brown</li>
  <li>fox jumps over</li>
  <li>the lazy dog</li>
</ol>

Sizes and spacing

Small screens

Class font-size line-height
nhs-heading-xl 32px 36px
nhs-heading-l 24px 32px
nhs-heading-m 20px 28px
nhs-heading-s 18px 28px
nhs-heading-xs 16px 24px
nhs-body-l 20px 28px
nhsuk-body 16px 24px
nhs-body-s 14px 24px
link 16px 24px
Class ul-margin li-margin
nhsuk-list nhsuk-list--bullet 16px 8px
Class ol-margin li-margin
nhsuk-list nhsuk-list--number 16px 8px

Large screens

Class font-size line-height
nhs-heading-xl 48px 56px
nhs-heading-l 32px 40px
nhs-heading-m 24px 32px
nhs-heading-s 22px 32px
nhs-heading-xs 19px 28px
nhs-body-l 24px 32px
nhsuk-body 19px 28px
nhs-body-s 16px 28px
Link 19px 28px
Class ul-margin li-margin
nhsuk-list nhsuk-list--bullet 24px 8px
Class ol-margin li-margin
nhsuk-list nhsuk-list--number 24px 8px

Weights

Use Frutiger Regular for body text.

font-weight: 400;

Use Frutiger Regular Bold for headings and emphasis.

font-weight: 600;

Research

We've tested our typography with lots of users including, for example, people with dyslexia and colour blindness.

Updated: January 2019