Styles - Typography

Our fonts and typographic styles, and how to apply them.

Font

Frutiger

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

NHS Digital has a licence for the Frutiger webfont that any services on the nhs.uk domain can use. The web font is hosted on nhs.uk and referenced in the NHS.UK frontend.

If you have a service that is on another domain, you will have to buy your own Frutiger webfont licence.

If you’re not sure whether you should be using Frutiger, you can email the service manual team at service-manual@nhs.net.

Fallback font

Default to Arial when Frutiger isn't available.

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

Headings

Open this headings typography example in new window
Copy headings typography code
<h1 class="nhsuk-heading-xl">nhsuk-heading-xl</h1>
<h2 class="nhsuk-heading-l">nhsuk-heading-l</h2>
<h3 class="nhsuk-heading-m">nhsuk-heading-m</h3>
<h4 class="nhsuk-heading-s">nhsuk-heading-s</h4>
<h5 class="nhsuk-heading-xs">nhsuk-heading-xs</h5>

Paragraphs

Body

The default paragraph font size is 19px on large screens and 16px on small screens.

You can also add classes to create a lead paragraph or smaller body copy to convey hierarchy in your page.

Lead paragraph

A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. Lead paragraphs use 24px type on desktop and should only be used once per page if needed.

Body small

You can use the nhsuk-body-s class sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.

The majority of your body copy should use the standard 19px paragraph size.

Font override classes

You might need to set the font size or font weight of an element outside of the predefined heading and paragraph classes. For this you can use the font override classes in your HTML or reference the typography mixins in your own components.

Font size

The full NHS.UK typography scale goes from 14px up to 64px on large screens. You can add these font size override classes to any other typographic class or element and they will change the font size.

Open this sizes typography example in new window
Copy sizes typography code
<p class="nhsuk-u-font-size-64">nhsuk-u-font-size-64</p>
<p class="nhsuk-u-font-size-48">nhsuk-u-font-size-48</p>
<p class="nhsuk-u-font-size-32">nhsuk-u-font-size-32</p>
<p class="nhsuk-u-font-size-24">nhsuk-u-font-size-24</p>
<p class="nhsuk-u-font-size-22">nhsuk-u-font-size-22</p>
<p class="nhsuk-u-font-size-19">nhsuk-u-font-size-19</p>
<p class="nhsuk-u-font-size-16">nhsuk-u-font-size-16</p>
<p class="nhsuk-u-font-size-14">nhsuk-u-font-size-14</p>

Font weight

As with the font size, you can add a font weight override class to any other typographic class or element to change the font weight to regular or bold weight.

Open this weight typography example in new window
Copy weight typography code
<p class="nhsuk-u-font-weight-normal">nhsuk-u-font-weight-normal</p>
<p class="nhsuk-u-font-weight-bold">nhsuk-u-font-weight-bold</p>

Links are blue and underlined by default with a styled focus state for people who use keyboards or other devices to navigate through a page.

If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

If it's not helpful to distinguish between visited and unvisited states, for example when linking to pages with frequently-changing content, such as the dashboard for an admin interface, use the nhsuk-link--no-visited-state modifier class.

Open this links unvisited typography example in new window

Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

Open this lists typography example in new window
Copy lists typography code
<ul class="nhsuk-list">
  <li><a href="#">Money, work and benefits</a></li>
  <li><a href="#">Care after a hospital stay</a></li>
  <li><a href="#">Support and benefits for carers</a></li>
</ul>

Bulleted lists

Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

Open this lists bulleted typography example in new window
Copy lists bulleted typography code
<p>Symptoms can include:</p>
<ul class="nhsuk-list nhsuk-list--bullet">
  <li>tiredness and lack of energy</li>
  <li>shortness of breath</li>
  <li>noticeable heartbeats (heart palpitations)</li>
  <li>pale skin</li>
</ul>

Numbered lists

Use numbered lists instead of bulleted lists when the order of the items is relevant.

You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.

Open this lists numbered typography example in new window
Copy lists numbered typography code
<h3>How to gargle with salt water</h3>
<ol class="nhsuk-list nhsuk-list--number">
  <li>Dissolve half a teaspoon of salt in a glass of warm water.</li>
  <li>Gargle with the solution then spit it out – don't swallow it.</li>
  <li>Repeat as often as you like.</li>
</ol>

Section break

You can use the nhsuk-section-break classes on an <hr> element to create a thematic break between sections of content. nhsuk-section-break has class-based modifiers for different size margins.

By default nhsuk-section-break is only visible by its margin. You can add the nhsuk-section-break--visible class to make it visible with a separator line.

Open this section breaks typography example in new window
Copy section breaks typography code
<hr class="nhsuk-section-break nhsuk-section-break--xl nhsuk-section-break--visible">
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
<hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<hr class="nhsuk-section-break nhsuk-section-break--visible">

Research

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

Have you tested these styles?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: January 2021