Make heading sizes match govuk-frontend

[andysellick]

What

First, change the default font size of the heading component.

• the heading component has options to control the font size (independently of the heading level) and all the options directly match the govuk-frontend heading sizes: XL, L, M and S
• however if no size option is passed to the component it defaults to a font size of 27px, which is between L (36px) and M (24px)
• this could lead to a confusion in the visual hierarchy of headings on a page
• removing this custom code and allowing the component to default to 24px (to match govuk-heading-m)

Secondly, change the size of H2 elements in govspeak to also be 24px, so that all H2s are consistently sized.

Why

Fixes #1995 and #1750

This issue is marked as a breaking change, but I don't think it will actually cause any errors in our code, only that a fair amount of headings will suddenly appear slightly smaller.

Example pages where there are default (27px) size heading components:

• https://www.gov.uk/government/publications/teacher-misconduct-panel-outcome-ms-lauren-green (heading component)
• https://www.gov.uk/research-for-development-outputs/shifts-in-condom-use-following-microbicide-introduction-should-we-be-concerned (govspeak headings)

Visual Changes

Heading component. Note that the 'no settings' text on the right is now 3px smaller.

Before	After

Govspeak headings.

Before	After

[andysellick]

I've discovered a bit more about this. Yes, we do deviate from the Design System, but apart from (the slightly odd case) where a heading component can be told to be 24px instead of 27px, we seem to be internally consistent across www.gov.uk.

One possible reason why our H2s are a bit bigger is because we have a lead paragraph component that often appears with a H2 that is also 24px in size. It's likely that the increased size of our H2 is to help distinguish the two.

Here's an example: https://www.gov.uk/find-licences/tv-licence

So really the choice here is whether we should force ourselves to use the slightly smaller heading size and potentially confuse users with the lead paragraph, or simply update the heading component so that if you pass it the M option it uses 27px instead of 24px (thus making it internally consistent).