Crown logo is not always aligned with logotype

[NickColley]

Speaking with Dave it seems you can't reproduce this on his machine but I have been able to on Browserstack.

Safari shows the logo lower instead of higher.

[dashouse]

I believe something has happened to increase the header size by 4px, the crown has potentially just stayed in the same place?

The header should be 50px / 60px with blue bar. Now 54px / 64px.

Removing the svg puts it back to original size.

[NickColley]

When testing in browser stack, Chrome 75 is fine 76 is not.

[NickColley]

If you move the font sizing CSS to the child element it brings back the previous behaviour, with some small adjustments needed.

Options:

1. Raise a bug report with Chrome
2. Make non-breaking CSS adjustments
3. Make a breaking change in version 4 to change the logo to entirely SVG

[colinrotherham]

@NickColley I nearly raised this yesterday as I've been working on an old project (GOV.UK Elements) and spotted the alignment difference!

Can confirm in Chrome 77.

[kr8n3r]

something like this should have it aligned across FF, Safari and Chrome

.govuk-header__logotype-crown {
    position: relative;
    margin-right: 1px;
    fill: currentColor;
    top: 0.125em;
    width: 1.2em;
    height: 1.2em;
    margin-top: -8px;
}

width, height and top will align it to the baseline. negative top margin is to tweak offset a bit

[NickColley]

Short term

We're going to fix this in CSS

Longer term

We've been thinking about replacing this with an inline SVG which includes the 'GOV.UK' text within the image itself.

This would also mean that when the fallback fonts are loaded then the logo will be correct, this could be useful if we were to change the loading strategy to 'swap'.

This would also include Internet Explorer 8 not loading the font.

We'll create another issue once we've done the short term work.

[36degrees]

As found by @trevorsaint, it looks like adding display: inline-block to the span.govuk-header__logotype fixes this (at least in Chrome – will need x-browser testing)