How to guides

Updating your service to use the new type scale

The GOV.UK Design System team has updated the GOV.UK Frontend type scale. This new scale is an available option to use now, but will be enforced by default in GOV.UK Frontend version 6.0.0. Here’s how to use it, what’s changed and what to expect when implementing it into your service.

Changes we’ve made

The new type scale includes the following changes from the previous scale:

Changes to the type scale
Point on type scale Change
14 Deprecated as a scale point and will be removed in GOV.UK Frontend version 6.0.0
16 Now 16px across all screen sizes
19 Now 19px across all screen sizes
24 On small screens, is now font size 21px instead of 18px and line height 25px instead of 20px
27 On small screens, is now font size 21px instead of 18px and line height 25px instead of 20px
36 On small screens, is now font size 27px instead of 24px and line height 30px instead of 25px

Read more about this work and why we’re updating our type scale.

How to use the new type scale

You can opt into the new scale by setting the feature flag variable $govuk-new-typography-scale at the root of your service’s Sass to true:

$govuk-new-typography-scale: true;

This will automatically use the new type scale. You do not need to change any of your Sass to use the new scale.

Warning This is an early release of the new type scale. We may release significant changes to the scale in releases between now and GOV.UK Frontend 6.0.0. Please read the version release notes to see if you are affected.

Testing your service against the new type scale

If your service uses custom elements made using GOV.UK Frontend, test your service against the new type scale to assess if you need to make any adjustments. Some key things to look for are:

  • spacing – With the increased font sizes, your custom elements may now look squashed on small screens.
  • specific positioning values – you may need to adjust these values, for example an absolute positioned element

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.