Review and update guidance for new typography scale

[owenatgov]

What

Update our typography guidance in response to the new font scale work done as part of https://github.com/alphagov/govuk-design-system/issues/2289.

Why

So that our guidance accurately reflects what we ship and so that teams understand how the new typography scale works.

Epic lead

TBC

Who needs to work on this

Interaction designers, content designers, support from devs

Who needs to work on this

## Done When
- [ ] https://github.com/alphagov/govuk-design-system/issues/3018
- [ ] https://github.com/alphagov/govuk-design-system/issues/3305
- [ ] https://github.com/alphagov/govuk-frontend-docs/issues/421

[christopherthomasdesign]

Kick off, 2 Aug

We had a kick off meeting about how to go about this work, because it's a bit bigger than most of the other ones in this epic. We're probably going to make this its own epic, within #2289.

Here's what we discussed.

What’s in scope

• Change factually incorrect content (e.g. 19px down to 16px)
• Show and explain the font scale (currently we only show this in the Frontend docs)
• Review and improve content on the page as a whole
• Restructure the navigation of things relating to typography, using ideas from the content audit work in early 2023
• Double check consistency with heading sizes on GOV.UK, and try to clarify any confusing differences

What’s out of scope

• Restructuring navigation outside of typography
• Anything included in existing content guidance (such as Writing for GOV.UK)

Risks

Risks to users:

• people might not be able to find stuff if we move it around
• if we create new pages, will people expect them to behave like components?
• people expect consistency with govuk publisher, confuse people
• how does work if the feature’s behind a feature flag at first?

Risks to delivery:

• summer holidays, content folk leaving at same time
• content ppl having other work going on
• content scope creep – going into more detail about use cases
• may conflict with work done during v5

Next steps and timelines

At this point, we think the typography work generally is likely to be finished late this year / early next. After v5, in v5.x, the first version will be behind a feature flag. The guidance needs to be ready for then.

Next steps and roles agreed in the meeting:

• Turn this into an epic and create the cards for the various tasks within it - Chris
• We'll start with prototyping ideas for the navigation – Chris and Charlotte will work on that together
• Then we'll work out how to show the type scale – all to discuss, designers to prototype if needed
• Then we'll cover overall content of the page(s) – Calvin to lead, others to support, Claire to review

[owenatgov]

Our typography documentation came up again during https://github.com/alphagov/govuk-frontend/issues/3837.

It emerged that anecdotally, users don't understand that govuk-font isn't just a way to set the font-size and line-height relative to the scale value you're setting. The specific ways it's misunderstood:

• Users don't fully understand the typography scale and the different font sizes by breakpoint
• Users don't realise that govuk-font and by extension govuk-typography-responsive is automatically creating media queries
• Users don't realise that govuk-font also calls govuk-typography-common, leading to unnecessary repeated CSS when it's called twice

This comment includes some examples of where this has happened.

A hypothesis on how to solve this would be to simply expose this dynamic in the documentation. Our spacing guidance has a great breakdown of the spacing scale, how responsive is different from static and the difference between govuk-responsive-[padding/margin] and govuk-spacing. Something similar explaining govuk-font and when you use govuk-typography-responsive (although there's a keenness to change this mixin's name) would help a lot.