Improve the GOV.UK Frontend responsive typography scale

[owenatgov]

What

We're planning to update the GOV.UK Frontend typography scale to make it more accessible.

Specifically, we intend to:

• remove 14 (14 px on desktop, 12 on mobile) as an option on the font scale
• set 16 to not drop to 14px on mobile but stay at 16 across all screen sizes
• set 19 to not drop to 16px on mobile but stay at 19 across all screen sizes
• review our line heights across all screen and font sizes
• realign our typography classes to all work off of the same “t-shirt size” sizing grid (xs to xl)
• adjust the size of other headings on mobile so that the hierarchy maintains a standard body size of 19px (current m on the govuk body specific font scale, will be s across all typography classes with this work)

Why

We’re doing this to assess how GOV.UK Frontend approaches typography on mobile. The way we’ve been handling responsive typography up to now, in line with the norms of digital design at the time of GOV.UK’s inception, is to specify a standard size on desktop and then treat mobile as a smaller variant. Over the past decade, this idea has shifted as screen sizes and device usage has changed. It is now preferable to provide a standard size on desktop, and “as big as is comfortable for the interaction type” on mobile. That means sizing interactive pieces to be used with thumbs instead of on-screen pointers, and sizing fonts to be readable from a range of up to half a metre (an arm’s length).

This perspective is also informed by the following:

• 12 risks becoming small enough that it’s no longer legible on certain screen resolutions on certain devices, in particular on Chrome
• Removing 14 would follow the British Dyslexia Association’s font-point recommendations (12pt to 16pt, which is 16px to 19px)

We carried out some polling of the community in the previous spike into this topic and found that 14 on the font scale had very low usage and very few, if any, valid use cases among the community.

You can see what this looks like in our first draft implementation, put together as part of the spike mentioned above.

As part of this, we are additionally planning on aligning our t-shirt sizing classes in order to ensure that there is a consistent correlation across our typography between actual size on our font scale and letter size and on the hypothesis that applying a letter to our font sass mixins make it easier for teams to understand when using it.

Epic lead

Owen

Who needs to work on this

Designers; Developers; Content designers; Accessibility specialists

Done when

Before publishing

- [x] https://github.com/alphagov/govuk-design-system/issues/2298
- [x] https://github.com/alphagov/govuk-design-system/issues/2301
- [ ] https://github.com/alphagov/govuk-design-system/issues/2299
- [ ] https://github.com/alphagov/govuk-frontend/issues/3837
- [ ] https://github.com/alphagov/govuk-frontend/issues/4242
- [ ] https://github.com/alphagov/govuk-design-system/issues/2862
- [ ] https://github.com/alphagov/govuk-design-system/issues/2863
- [ ] https://github.com/alphagov/govuk-design-system/issues/2300

Small stories off of manual testing

These will be merged into the new scale branch before initial release

- [ ] https://github.com/alphagov/govuk-frontend/issues/3895
- [ ] https://github.com/alphagov/govuk-frontend/issues/3897
- [ ] https://github.com/alphagov/govuk-design-system/issues/2899
- [ ] https://github.com/alphagov/govuk-frontend/issues/3905
- [ ] https://github.com/alphagov/govuk-frontend/issues/3924
- [ ] https://github.com/alphagov/govuk-frontend/issues/3923

5.1

Includes some refactoring of our components which we will group together in the comms for the release as preparation for the typography to advertise it.

- [ ] https://github.com/alphagov/govuk-frontend/issues/4243
- [ ] https://github.com/alphagov/govuk-frontend/issues/3898
- [ ] https://github.com/alphagov/govuk-frontend/issues/3896
- [ ] https://github.com/alphagov/govuk-frontend/issues/3900
- [ ] https://github.com/alphagov/govuk-frontend/issues/3778

5.2

- [ ] https://github.com/alphagov/govuk-frontend/issues/2799
- [ ] https://github.com/alphagov/govuk-design-system/issues/2900

6.0

- [ ] https://github.com/alphagov/govuk-frontend/issues/4276
- [ ] https://github.com/alphagov/govuk-frontend/issues/2797
- [ ] https://github.com/alphagov/govuk-frontend/issues/2798
- [ ] https://github.com/alphagov/govuk-frontend/issues/2185

[36degrees]

We'll need to think about how this works alongside GOV.UK Template / Frontend Toolkit / Elements (the 'legacy codebases') and 'compatibility mode'.

At the minute, the font sizing for the legacy codebases and GOV.UK Frontend are very similar, other than small some differences in line height etc.

However, with this change, where there is a mix of content from the legacy codebases and GOV.UK Frontend, then anything from the legacy codebase will continue to shrink to 16px on mobile, and anything from GOV.UK Frontend will not.

This can be seen in some of the full page examples (which show content from the legacy codebases mixed in) in Chris's spike (https://github.com/alphagov/govuk-frontend/pull/2421):

Applicant Details

Renew your driving licence

We might want to consider either:

• keeping the old typography scale when compatibility mode is enabled
• removing compatibility mode in the same release (which would be my preference)

[owenatgov]

We now have a release plan that we'll be working from when we are ready to do this work. Currently visible to team members only: https://docs.google.com/document/d/1G4-qz5INZ8196PmR1OSon46MyWy8V0GshErWeSsKmY0/edit#heading=h.iyendlupo5ih

[owenatgov]

We will now longer be releasing this change in GOV.UK Frontend v5.0.

The 2 main reasons for this are:

• With the number of changes coming in 5.0, we think that moving this change which will require a lot of auditing and changes from teams will enable them to move over to 5.0 more fluidly
• We think that this work grouped nicely with our parallel work on WCAG 2.2 and some of the planned comms around this

We are now planning on releasing this initially as a minor v5 release behind a feature flag with a view to make the new typography scale the standard in 6.0.