If your service is on the subdomain you must use the GDS Transport font.

You should use an alternative typeface like Helvetica or Arial for services that are publicly available on different domains.

If you’re not sure whether you should be using GDS Transport, read the Service Manual guide on making your service look like GOV.UK or contact the Design System team.


Use headings consistently to create a clear hierarchy throughout your service.

Mark up headings semantically using the appropriate <h#> level HTML element and use a heading class to apply the GOV.UK styling.

For long form content use the corresponding size class. For example an <h1> should use govuk-heading-xl, an <h2> should use govuk-heading-l.

For question pages and other short form content, try using the corresponding size class first. But change it if it makes the page feel unbalanced. For example, if you’re using an especially long question as your <h1>, try using govuk-heading-l for the <h1>, govuk-heading-l for the <h2> and so on.

Write all headings in sentence case.

<h1 class="govuk-heading-xl">govuk-heading-xl</h1>
<h2 class="govuk-heading-l">govuk-heading-l</h2>
<h3 class="govuk-heading-m">govuk-heading-m</h3>
<h4 class="govuk-heading-s">govuk-heading-s</h4>

Headings with captions

Sometimes you may need to make it clear that a heading is part of a larger section or group. To do this, you can use a heading with a caption.

<span class="govuk-caption-xl">govuk-caption-xl</span>
<h1 class="govuk-heading-xl">govuk-heading-xl</h1>

<span class="govuk-caption-l">govuk-caption-l</span>
<h2 class="govuk-heading-l">govuk-heading-l</h2>

<span class="govuk-caption-m">govuk-caption-m</span>
<h3 class="govuk-heading-m">govuk-heading-m</h3>

If the caption should be considered part of the page heading, you can also nest the caption within the H1.

<h1 class="govuk-heading-xl">
  <span class="govuk-caption-xl">govuk-caption-xl</span>



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.

<p class="govuk-body-l">govuk-body-l</p>

Body small

You can use the govuk-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 GOV.UK typography scale goes from 14px up to 80px 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.

<p class="govuk-body govuk-!-font-size-80">govuk-!-font-size-80</p>
<p class="govuk-body govuk-!-font-size-48">govuk-!-font-size-48</p>
<p class="govuk-body govuk-!-font-size-36">govuk-!-font-size-36</p>
<p class="govuk-body govuk-!-font-size-27">govuk-!-font-size-27</p>
<p class="govuk-body govuk-!-font-size-24">govuk-!-font-size-24</p>
<p class="govuk-body govuk-!-font-size-19">govuk-!-font-size-19</p>
<p class="govuk-body govuk-!-font-size-16">govuk-!-font-size-16</p>
<p class="govuk-body govuk-!-font-size-14">govuk-!-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.

<p class="govuk-body govuk-!-font-weight-regular">govuk-!-font-weight-regular</p>
<p class="govuk-body govuk-!-font-weight-bold">govuk-!-font-weight-bold</p>

Bold text

You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.

For example, “Your reference number is ABC12345678. Use this to track your application. Updates will be sent to

Use bold sparingly. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

Use the govuk-link--no-visited-state modifier class where it is 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.

Only remove underlines from links if:

  • the number or placement of links makes them difficult to scan or interact with the element they’re part of, and
  • it’s clear to the user from the context that they’re links, even without the underline

For example, navigation links in a header won’t necessarily need underlines. Users will understand that they’re links because of their position on the page.


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

<ul class="govuk-list">
    <a class="govuk-link" href="#">Benefits calculators</a>
    <a class="govuk-link" href="#">Benefit overpayments</a>
    <a class="govuk-link" href="#">Benefit fraud</a>
    <a class="govuk-link" href="#">More</a>

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.

<p class="govuk-body">You can buy:</p>
<ul class="govuk-list govuk-list--bullet">

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.

<ol class="govuk-list govuk-list--number">
  <li>Delivery address.</li>

Section break

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

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

<hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--visible">

Help improve this page

To help make sure the Typography page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System you can contact the team: