Use SVG lockup for GOV.UK in header

What

Use an SVG lockup of the GOV.UK logotype in the header.

This will help ensure consistent alignment between the crown emblem and the text, and ensure that the correct typeface is used regardless of whether the webfont loads.

This was previously discussed in https://github.com/alphagov/govuk-frontend/issues/1575#issuecomment-532689552.

Why

At the minute, our font loading strategy is to use display: fallback which gives a short (3s) swap period during which the font can be swapped out to Transport. If the font takes longer than 3s to load (e.g. on a slow 3G connection) the font swap will not occur and the page will use the next font in the stack (usually Arial).

This means ‘GOV.UK’ in the logo in the header is rendered incorrectly. As this forms a key part of the brand, we should take care to ensure that it is rendered correctly wherever possible.

@Nooshu has been looking at #1437 again and we might consider changing the font-face display attribute to:

• swap which gives an infinite swap time, but makes it more likely that Arial will be displayed briefly before being swapped out (because, at least as implemented in Chrome, there is no block period)
• optional which means the browser can choose not to download the font at all, for example if it knows it is on a slow connection.

Separately, we’ve seen issues with alignment between the crown and the logotype before on a few occasions, and using a lockup should fix this.

Further details

We’ll need to consider:

• the fallback PNG, used by browsers that do not support SVG
• how the logo is announced to screen readers
• print style sheet

Who needs to know

Designers; Developers

Done when

• GOV.UK logo has been switched for an accessible, performant SVG
• We have decided whether a fallback is necessary for IE8 and how that should work
• We have decided whether a fallback is necessary for browsers that do not support SVG other than IE8 and how that should work
• Release notes make sense for users who have not made the changes in #2229
• Release notes prompt users who have not made the changes in #2229 to do so now
• Browser and accessibility testing completed
• Tested on slow 3G connection (see above)
• “Details of breaking change” section below completed to help with writing release notes

Details of breaking change

• which users are affected: TBC
• the change that’s been made: TBC
• changes users will have to make: TBC
• impact of users not making those changes: TBC

[NickColley]

Think this would be a breaking change since you’d end up with [crown] GOV.UK GOV.UK if users had not updated their markup.

[owenatgov]

As we’re going to be dropping support for IE in v5, the need for a PNG fallback isn’t going to be there anymore from 5 onwards. We could therefore introduce a version of https://github.com/alphagov/govuk-frontend/pull/1960 without the need for a PNG fallback in v5. @colinrotherham also pointed out we could explore alternative alignment methodologies instead of an SVG. The plan is to run this past the designers to assess the risks of the govuk logo not using the transport font. I’ve added the v5 milestone as this could potentially go in with v5.