Remove 24px from typography scale

[paulrobertlloyd]

Description

• 24px is not listed as font size in the typography scale
• The difference between 24px and 26px is slight, and having 3 sizes in the 22px - 26px range, reduces the contrast between heading sizes (which is why the medium heading size was increased from 24px to 26px last year).
• The 24px font size is only used for a few components:
  • Panel headings (feature card, panel table, warning callout, do and don’t lists)
  • Pagination
  • Panel
  • Lede text (.nhsuk-lede-text)
  • Large text (.nhsuk-body-l)
• Using 24px for panel headings means these don’t align with other headings on a page (and if you use nhsuk-heading-s and nhsuk-heading-m in combination with this component via headingClasses, you can soon wind up having cards with very similar but inconsistent heading sizes, as I’ve realised to my horror)

If you review the updated backstop images, you can see the overall change is slight.

I’ve removed 24px from the scale entirely, but doing so would mean nhsuk-font-size-24 in markup would no longer work and mixins calling the 24 size would throw an error. We have a few options for this, including around deprecating and providing 26px as a fallback. Before getting into that, I first wanted to get people’s thoughts on this change.

Related:

• Update type scale #1019)

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[anandamaryon1]

I'm supportive. I left it in there whilst doing the typography edits last year because it was being used by the other components you listed. But you call out that in usage, it now means that various cards and styles can inconsistently use 24 or 26, I'm happy to consolidate.