Headings
February 2024: GOV.UK Frontend v5.2 includes the new type scale behind a feature flag. This update will make text easier to read on smaller screens. It will become the standard type scale in a future release, but for now you can still view the old type scale.
Read about updating your service to use the new type scale.
Use heading tags, such as <h1>, <h2> and so on, to tag the headings on a page. Apply a heading class, such as govuk-heading-l, to style them visually. Style headings consistently to create a clear content structure throughout your service.
For a question page, or pages with long headings, follow the usual hierarchy of heading levels and styles associated with them. For example, govuk-heading-l for an <h1>, followed by govuk-heading-m for an <h2> and so on. In rare cases, you might want to alter how you use the headings hierarchy to achieve a better visual balance. An example of this is in the design system’s notification banner which uses heading levels in a different order to emphasise the most important information. If you do change the heading hierarchy in a similar way, it needs to go through accessibility testing before use.
Write all headings in sentence case.
<h1 class="govuk-heading-l">govuk-heading-l</h1>
<h2 class="govuk-heading-m">govuk-heading-m</h2>
<h3 class="govuk-heading-s">govuk-heading-s</h3>If your page has lots of long form content, start with govuk-heading-xl for an <h1>, govuk-heading-l for an <h2>, and so on.
<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>Headings with captions
Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading with a caption above it.
<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>
<h1 class="govuk-heading-l">govuk-heading-l</h1>
<span class="govuk-caption-m">govuk-caption-m</span>
<h1 class="govuk-heading-m">govuk-heading-m</h1>If the caption should be considered part of the page heading, you can also nest the caption within the <h1>.
Help improve this style
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Headings’ discussion on GitHub and share your research
- propose a change – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.