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, start with govuk-heading-l for an <h1>, govuk-heading-m for an <h2> and so on. But change it if your pages feel unbalanced – the heading class you use does not always need to correspond to the heading level.
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.
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.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/small/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">body small – typography</span>
example in a new tab
</a>
</div>
<iframe title="Body small – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/small/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#body-small-typography-example-open-html" role="tab" aria-controls="body-small-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#body-small-typography-example-open-html" aria-controls="body-small-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="body-small-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-s"</span>></span>govuk-body-s<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
</div>
</div>
Text alignment override classes
If you need to align text differently to how it usually displays on the page, you can use text alignment override classes.
Use:
govuk-!-text-align-left to align text to the left
govuk-!-text-align-right to align text to the right
govuk-!-text-align-centre to align text to the centre
You should usually left-align body copy that's read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen.
Do not 'justify' blocks of body copy so that they're aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.
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.
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.
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 name@example.com"
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
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.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/link-no-visited-state/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">links with no visited state – typography</span>
example in a new tab
</a>
</div>
<iframe title="Links with no visited state – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-no-visited-state/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#links-with-no-visited-state-typography-example-open-html" role="tab" aria-controls="links-with-no-visited-state-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#links-with-no-visited-state-typography-example-open-html" aria-controls="links-with-no-visited-state-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="links-with-no-visited-state-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link govuk-link--no-visited-state"</span>></span>link text (with no visited state)<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
</div>
</div>
External links
If it's an external link to a non-government website, make that clear in the link text. For example, 'read advice on writing link text from [name of organisation]'. There's no need to say explicitly that you're linking to an external site. Do not use an external link icon.
If you need a link to open in a new tab - for example, to stop the user losing information they’ve entered into a form - then include the words ‘opens in new tab’ as part of the link. There's no need to say 'tab or window', since opening in a new tab is the default behaviour for most browsers.
Include rel="noreferrer noopener" along with target="_blank" to reduce the risk of reverse tabnabbing. The following example shows how to do this in HTML.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/link-opening-in-new-tab/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">links that open in a new tab – typography</span>
example in a new tab
</a>
</div>
<iframe title="Links that open in a new tab – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-opening-in-new-tab/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#links-that-open-in-a-new-tab-typography-example-open-html" role="tab" aria-controls="links-that-open-in-a-new-tab-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#links-that-open-in-a-new-tab-typography-example-open-html" aria-controls="links-that-open-in-a-new-tab-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="links-that-open-in-a-new-tab-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"noreferrer noopener"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span>link text (opens in new tab)<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
</div>
</div>
If you're displaying lots of links together and want to save space and avoid repetition, consider doing both of the following:
adding a line of text before the links saying 'The following links open in a new tab'
including <span class="govuk-visually-hidden">(opens in new tab)</span> as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers
Links on dark backgrounds
Use the govuk-link--inverse modifier class to show white links on dark backgrounds — for example, in headers, custom components, and patterns with darker backgrounds.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/link-on-dark-background/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">links on dark backgrounds – typography</span>
example in a new tab
</a>
</div>
<iframe title="Links on dark backgrounds – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-on-dark-background/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#links-on-dark-backgrounds-typography-example-open-html" role="tab" aria-controls="links-on-dark-backgrounds-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#links-on-dark-backgrounds-typography-example-open-html" aria-controls="links-on-dark-backgrounds-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="links-on-dark-backgrounds-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link govuk-link--inverse"</span>></span>link text (on dark background)<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
</div>
</div>
Links without underlines
Use the govuk-link--no-underline modifier class to remove underlines from links.
Only do this if the context tells the user that the text is a link, even without the underline.
For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are, at the same place, across different pages.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/link-no-underline/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">links without underlines – typography</span>
example in a new tab
</a>
</div>
<iframe title="Links without underlines – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-no-underline/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#links-without-underlines-typography-example-open-html" role="tab" aria-controls="links-without-underlines-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#links-without-underlines-typography-example-open-html" aria-controls="links-without-underlines-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="links-without-underlines-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link govuk-link--no-underline"</span>></span>link text (with no underline)<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
</div>
</div>
Lists
Use lists to make blocks of text easier to read, and to break information into manageable chunks.
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.
If a list is hard to read because the items run across multiple lines you can add extra spacing.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/styles/typography/list-spaced/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">spaced lists – typography</span>
example in a new tab
</a>
</div>
<iframe title="Spaced lists – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/typography/list-spaced/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation">
<a href="#spaced-lists-typography-example-open-html" role="tab" aria-controls="spaced-lists-typography-example-open-html" data-track="tab-html">HTML</a>
</li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#spaced-lists-typography-example-open-html" aria-controls="spaced-lists-typography-example-open-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="spaced-lists-typography-example-open-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You will have to apply the reverse charge if you supply any of these services:<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<ulclass="govuk-list govuk-list--bullet govuk-list--spaced"><li>
constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
</li><li>
constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours
</li><li>
pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence
</li><li>
installing heating, lighting, air-conditioning, ventilation, power supply, drainage, sanitation, water supply or fire protection systems in any building or structure
</li><li>
internal cleaning of buildings and structures, so far as carried out in the course of their construction, alteration, repair, extension or restoration
</li><li>
painting or decorating the inside or the external surfaces of any building or structure
</li><li>
services which form an integral part of, or are part of the preparation or completion of the services described above - including site clearance, earth-moving, excavation, tunnelling and boring, laying of foundations, erection of scaffolding, site restoration, landscaping and the provision of roadways and other access works
</li></ul>
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.
In 2023, we’ll be reviewing and improving our typography standards to make sure they’re up-to-date and as accessible as possible for users and service teams. Read a blog post about our plans.
Help improve this style
To help make sure that this page is useful, relevant and up to date, you can: