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

Tasks

Beta Give feedback

1. Finalise font scale update proposal #2298
   design typography +2
2. Draft comms to the community regarding the font scale update #2301
   community typography +2
   
3. Review design system components following finalised update to font scale #2299
   3 of 3
   accessibility design typography +3
   
4. Investigate ways to let users customise the typography scale in govuk-font govuk-frontend#3837
   sass / css typography 🔍 investigation +3
   
5. Check improper use of govuk-font within GOV.UK Frontend govuk-frontend#4242
   sass / css typography +2
   
6. Review design system website against new typography scale #2862
   accessibility design typography +3
   
7. Create comms to assist teams in auditing their services against the new typography scale #2863
   community typography +2
   
8. Review and update guidance for new typography scale #2300
   2 of 3
   epic guidance typography +3
   

Small stories off of manual testing

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

Tasks

Beta Give feedback

1. Update footer link font size to 19 for new typography scale govuk-frontend#3895
   footer typography +2
   
2. Adjust padding on the panel component for new typography scale govuk-frontend#3897
   panel typography +2
   
3. Update panel guidance to advise not using long reference numbers for new typography scale #2899
   panel typography +2
   
4. Increase space between tag and text on small screens in the phase banner for new typography scale govuk-frontend#3905
   phase banner typography +2
   
5. Increase margins between form groups for new typography scale govuk-frontend#3924
   fieldset typography +2
   
6. Investigate long tags in task lists govuk-frontend#3923
   tag typography 🔍 investigation +3
   

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.

Tasks

Beta Give feedback

1. Rename govuk-typography-responsive govuk-frontend#4243
   sass / css typography +2
   
2. Fix alignment of small variants of radios and checkboxes govuk-frontend#3898
   checkboxes radios typography +3
   
3. Review position of the menu button in the header govuk-frontend#3896
   header typography +2
   
4. Review line height of prefix and suffixes for text inputs govuk-frontend#3900
   text input typography +2
   
5. Split tabular numbers functionality out from the govuk-font mixin govuk-frontend#3778
   sass / css typography +2
   

5.2

Tasks

Beta Give feedback

1. Release new typography scale govuk-frontend#2799
   typography +1
2. Work with GOV.UK to test the new typography scale #2900
   typography +1
   

6.0

Tasks

Beta Give feedback

1. Check if we need a mixin for getting specific font maps from the typography scale govuk-frontend#4276
   sass / css typography +2
2. Remove 14 from the font scale govuk-frontend#2797
   breaking change typography +2
3. Update typography classes to be consistent govuk-frontend#2798
   breaking change typography +2
4. Allow govuk-typography-responsive to be called with a 't-shirt size' for $size govuk-frontend#2185
   feature request sass / css typography 🕔 hours +4

[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 (alphagov/govuk-frontend#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