Typography

Font override classes

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 font override classes sparingly to change the default styling of text on a page.

You can use the font override classes in your HTML or reference the typography mixins (govuk-font or govuk-font-size) in your own components.

Text alignment

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

As the most commonly used languages on GOV.UK are written left-to-right, you should usually left-align body copy text. Right-aligned body copy text can be hard for users to find and read when they magnify their screen. Use right-aligned body copy text if you are translating content into a language which is written right-to-left.

Do not ‘justify’ blocks of body copy text so it’s aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.

Font size

The full GOV.UK typography scale goes from 16px 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.

Open this example in a new tab

HTML

<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>

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 example in a new tab

HTML

<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

Use bold text sparingly - using too much will make it difficult for users to know which parts of your content needs their attention the most.

You can use bold to highlight critical information and emphasise particular words in a transaction.

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

Help improve this style

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

• take part in the ‘Font override classes’ 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.