Text styles

Use headings, body text and supporting text in a clear, readable hierarchy.

We use the web-based Inter font. These styles follow the GOV.UK Design System patterns.

Headings

Use semantic heading elements such as <h1> and <h2>, with a matching GOV.UK heading class. This creates a clear structure for everyone, including people using assistive technology.

Example	Class
XL heading	govuk-heading-xl
Large heading	govuk-heading-l
Medium heading	govuk-heading-m
Small heading	govuk-heading-s

Headings with captions

Use a caption above a heading when you need to show that a page belongs to a larger section or group.

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

Paragraphs

The default body size is 19px on large screens and 16px on smaller screens. Use govuk-body-l for a single introductory paragraph and govuk-body-s for supporting information.

<p class="govuk-body">Body copy</p>
<p class="govuk-body-l">Lead paragraph</p>
<p class="govuk-body-s">Small supporting copy</p>

Responsive behaviour

The type scale changes at the tablet breakpoint so text remains readable across screen sizes.

Element	Small screen	Large screen
H1	32px / 35px	48px / 51px
H2	24px / 27px	32px / 35px
H3	18px / 21px	24px / 27px
Body	16px / 21px	19px / 25px
Small	14px / 18px	16px / 21px