Elegant fallback for GDS transport

[Loque-]

Unfortunately the GDS transport is only licensed for use on a few set domains as detailed here: https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov-uk-fonts/

An open source, elegant, fallback font has been identified;
https://fonts.google.com/specimen/Libre+Franklin, other candidates are welcomed.
https://rsms.me/inter/ identified by established designers working on GDS.

This ticket is to discuss/propose any possible implementations that do not have a negative impact on performance or how the page renders on load.

Article for further reading on loading fonts: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

[SimonMooreCIC]

@Loque- Do we have confirmation of what domain this is actually going to be sitting on?

[Loque-]

I am not sure what the final TLD will be for the app we are working on, but it would be good to add a sensible fallback for everyone using govuk-react and it helps everyone especially during development.

[Loque-]

Oh, I should update this with the font that Chris Taylor pointed out. I'll update this message in a sec.

https://rsms.me/inter/

[SimonMooreCIC]

Yeah that was going to be next point. It will be worth discussing this with Chris Taylor about a sensible font fallback, if this hasn't happened already.

[Loque-]

Yea he has a good one, I edited my post above with a link to it - this would be the one to fallback to.

[NickColley]

You could also consider using a system font stack which will be the fastest possible experience for users, and render the best font on their system.

Most machines have Helvetica or Arial also: http://fontfamily.io/Helvetica,Arial,sans-serif which could be considered.

[Loque-]

Thanks Nick! Yes we render Arial as the fallback currently - and I personally am a big fan of the system font stack, however for this use case I think it would be great to have a fallback that looked like Transport.

[owenm6]

It is looking more and more likely that InterUI will be the font choice for any Home Office service that doesn't sit on GOV.UK.

[NickColley]

Another thing I forgot to mention:

We have an unreleased version of the font that has the baseline to match Helvetica, Arial (the fallbacks), so hopefully when we ship that, the difference will be hard to notice for most users.

With the amount of time fonts take to download, I would personally leap at the chance to use system fonts like the Australian government has done: https://designsystem.gov.au

This prioritises users needs over aesthetics in my opinion...

[penx]

There are a few approaches I can think of:

1. set the font stack to something like: Transport, InterUI, Helvetica, Arial, sans-serif and then leave it up to the parent application to import the fonts if they want to load them

2. allow the parent application to specify/override font stack with theming

3. both of the above

[penx]

I also think that in internal tools where load speed is of very high importance we should be using system fonts unless custom fonts can be loaded progressively and non-blocking to critical rendering path. Of course this may mean a layout change when the fonts load so maybe best avoided altogether on such tools for both aesthetics and user needs.

[owenm6]

We chose Inter UI for its legibility primarily. Most of the internal services are multi-use so wouldn't caching negate most load speed issues?

[penx]

This will be handled in #851