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 (govuk-font
mixin or govuk-font-size
mixin) 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 leftgovuk-!-text-align-right
to align text to the rightgovuk-!-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.
<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.
<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”
Tabular numbers
Tabular numbers are an alternative style where each digit is given equal width.
Using tabular numbers can make numbers intended for comparison to one another easier to read. For example, numbers in data tables, or reference numbers where the additional spacing makes it easier to read each digit individually.
You can also use tabular numbers for numbers that dynamically update, such as in a counter. The equal width of each digit prevents the numbers from visually moving towards and away from each other as the counter updates.
Activate tabular numbers by using govuk-!-font-tabular-numbers
.
Breaking up long words
You might need to show long words that cannot be changed or broken into smaller parts, such as:
- technical or scientific terms
- long email addresses
- words from other languages
Long words can create issues in constrained spaces such as mobile device screens and data tables. They can ‘break out’ of the layout, resulting in a broken visual appearance and requiring users to scroll horizontally to view all of your content.
You can help to reduce these issues by surrounding content likely to ‘break out’ with govuk-!-text-break-word
.
This class forcibly splits long words onto multiple lines when they become longer than the width of the container. It’ll make the split exactly where the word would otherwise ‘break out’, which might make compound words more difficult to read. You can control where words can be split by inserting the wbr
HTML tag into your content.
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p class="govuk-body">
<strong>With class</strong><br>
We'll send an email to: <span class="govuk-!-text-break-word">communications@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochuchaf.gov.uk</span>.
</p>
</div>
<div class="govuk-grid-column-one-half">
<p class="govuk-body">
<strong>With <code>wbr</code></strong><br>
We'll send an email to: <span class="govuk-!-text-break-word">communications@<wbr>llanfair<wbr>pwll<wbr>gwyngyll<wbr>gogerych<wbr>wyrndrob<wbr>wll<wbr>llanty<wbr>silio<wbr>gogogoch<wbr>uchaf<wbr>.gov.uk</span>.
</p>
</div>
</div>
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.