Adjust crown alignment in the heading component

[injms]

What

Adjust the crown in the header component slightly.

Also swapped out a govuk- class for a gem-c-class.

Why

So it better aligns with the "GOV.UK" logotype. And govuk- is the namespace for the Design System - classes in the gem should be gem-c-.

Visual Changes

Before	After	Diff

[nnagewad]

Looks good @injms

[christopherthomasdesign]

Hi all, sorry to jump in!

I've just been overlaying the header in the Design System over these because they looked a bit different (the Design System one is the 50% opacity one on top).

The crown and GOV.UK text both look like they have more or less the same alignment as the Design System one, but the padding around the logo seems to vary quite a lot across the different headers:

Maybe I'm missing the intent of the change here – is this what's being fixed?

[injms]

@christopherthomasdesign - for some reason the crown was looking really misaligned - it was not lining up with "GOV.UK" as expected. I've updated the description with a visual diff that better shows the difference.

There are some bigger updates coming to the header across www.gov.uk soon, so this is more of a quick fix to tide us over until those changes are live.

I don't know why the padding is different compared to the header in the Design System - happy to have a chat after I've dug a bit more into the history of this, but for the moment I think it's outside the scope of this pull request.

[36degrees]

for some reason the crown was looking really misaligned - it was not lining up with "GOV.UK" as expected.

Assuming you're seeing this as part of the public layout rollout, I'm pretty sure this'll be related to you switching from the v1 font to the v2 font as they have different baselines. We tweaked the baseline for the v2 version of the font so that it better aligned with Arial (or most other fonts) so that the vertical alignment is correct if the font fails to load.

There's a number of 'corrections' in GOV.UK Frontend depending on whether compatibility mode is on or off. Fundamentally though, the crown and the logotype should line up without you needing to apply additional corrections.

Are there any other overrides being applied to any other elements? I think there must be a 'correction' somewhere that's tweaking the alignment for the v1 font that needs to be removed, rather than adding yet another override.

Happy to chat about this if that's useful.

[chao-xian]

Thanks @36degrees @christopherthomasdesign but this is an issue we need to fix now as a priority and can investigate your comments later. Hope that's ok.

[injms]

I've raised this hack as an issue so it doesn't get lost and we can investigate further when time permits - #2187

[chao-xian]

To be clarify, the PR fixes this issue: