Type scale
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.
The type scale is a collection of font sizes and line heights that underpin all of the typographic styles on GOV.UK. It has been tested and iterated for readability on different devices.
When creating new components, always start by using the existing typography styles. If you need to create a new style, align it with one of the points on the type scale.
How it works
Like the spacing scale, every point on the type scale uses a line height in a multiple of 5px. This creates a consistent vertical rhythm, which makes pages easier to scan and read.
GOV.UK Frontend outputs CSS in relative units like em or rem. This helps the type resize better when zoomed or magnified. We’ve used pixels (px) here so it’s easier to understand.
Responsive behaviour
The type scale changes based on screen size.
The scale for ‘large screens’ is used when the screen is wider than the tablet breakpoint (640px).
| Point on type scale | Used by | Font size | Line height |
|---|---|---|---|
| 80 | Only used in exceptional circumstances | 80px | 80px |
| 48 | govuk-heading-xl |
48px | 50px |
| 36 | govuk-heading-l |
36px | 40px |
| 27 | Only used in exceptional circumstances | 27px | 30px |
| 24 | govuk-heading-m, govuk-body-l |
24px | 30px |
| 19 | govuk-heading-s, govuk-body |
19px | 25px |
| 16 | govuk-body-s |
16px | 20px |
| Point on type scale | Used by | Font size | Line height |
|---|---|---|---|
| 80 | Only used in exceptional circumstances | 53px | 55px |
| 48 | govuk-heading-xl |
32px | 35px |
| 36 | govuk-heading-l |
27px | 30px |
| 27 | Only used in exceptional circumstances | 21px | 25px |
| 24 | govuk-heading-m, govuk-body-l |
21px | 25px |
| 19 | govuk-heading-s, govuk-body |
19px | 25px |
| 16 | govuk-body-s |
16px | 20px |
The old type scale
In February 2024, we updated the type scale in GOV.UK Frontend v5.2 to make text easier to read on small screens. While the new type scale is behind a feature flag, you can still view the old type scale.
View the old type scale
| Point on type scale | Used by | Font size | Line height |
|---|---|---|---|
| 80 | Only used in exceptional circumstances | 80px | 80px |
| 48 | govuk-heading-xl |
48px | 50px |
| 36 | govuk-heading-l |
36px | 40px |
| 27 | Only used in exceptional circumstances | 27px | 30px |
| 24 | govuk-heading-m, govuk-body-l |
24px | 30px |
| 19 | govuk-heading-s, govuk-body |
19px | 25px |
| 16 | govuk-body-s |
16px | 20px |
| 14 | govuk-body-xs |
14px | 20px |
| Point on type scale | Used by | Font size | Line height |
|---|---|---|---|
| 80 | Only used in exceptional circumstances | 53px | 55px |
| 48 | govuk-heading-xl |
32px | 35px |
| 36 | govuk-heading-l |
24px | 25px |
| 27 | Only used in exceptional circumstances | 18px | 20px |
| 24 | govuk-heading-m, govuk-body-l |
18px | 20px |
| 19 | govuk-heading-s, govuk-body |
16px | 20px |
| 16 | govuk-body-s |
14px | 16px |
| 14 | govuk-body-xs |
12px | 15px |
Using the type scale in your own CSS
Include the govuk-font mixin to use GOV.UK typography in your CSS.
For example, if you want a custom element to use type scale point 19, use:
@include govuk-font($size: 19);You can add additional arguments to control font weight, use tabular font spacing, or to override the line height:
@include govuk-font($size 19, $weight: bold, $tabular: true);If you only want to set the font size
Do not use govuk-font if you only want to change the font size and line height as it includes additional typography-related CSS like the New Transport font family. Instead, you should use the govuk-font-size mixin:
@include govuk-font-size($size: 19);Help improve this style
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Type scale’ 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.