A few notes on typography
On Tuesday evening we made another release of changes to GOV.UK. One of the biggest areas of discussion centered around the typography changes. Ben Terrett, Head of Design, explains the choices which have been made and why.
A few words about the changes to GOV.UK typography. I’ll write more about the other changes we’ve made later, but I think typography warrants its own blog post. It’s aimed at type geeks. The rest of you – we changed the typeface, it makes things simpler, it doesn’t work everywhere yet, we’re fixing it.
You will have noticed that we’re using a new typeface. The previous version of GOV.UK used three typefaces, Gill Sans, Georgia and Helvetica. We also used several different type styles and sizes – too many. We dropped Georgia sometime ago but we needed to go further. As a team we did an exercise where we set the site in one typeface, just one type size and we made everything black and white.
This is pretty brutal, but it focuses the mind. What are we using different typefaces for? How many different sizes do we need? We agreed to try and only use three different type styles per page. It’s not a solid rule, but it’s a good place to start from.
We looked around for an extremely legible typeface. Accessibility is key at GDS and ideally we’d like a typeface that’s good enough for us not to need an ‘easier to read’ font option for the dyslexic and those with other visual or cognitive issues. We tried lots of different ones and the best was Transport. This shouldn’t come as a surprise – it’s the typeface designed by Jock Kinneir and Margaret Calvert in the late fifties/early sixties for Britain’s national motorway and road sign system. They spent years testing for legibility in all sorts of extreme conditions; in the rain, at night, at speed.
The original is a bit bold for web use, but Margaret has been working with Henrik Kubel on a new digital version with six new weights called New Transport. Calvert and Kubel have let us trial this version on the latest release, in two different weights.
It’s a beautiful face, extremely legible with some nice quirky characteristics (the commas are particularly nice). There’s obviously a lovely symmetry to using the typeface from the road sign project as I’ve written before. Or, as Margaret puts it, “It is really exciting to see New Transport used for the first time, online, for the Government’s [beta] website… Almost as exciting as driving down the M1 for the first time.”
By far the largest design element of GOV.UK is typography. Many pages are just text information. Pictures are rare. Type is important to any design but even more so in our case. If we don’t use webfonts we have to use a default font available to everyone such as Helvetica or Times and neither of these are right, for reasons I’ll talk about another time, so it’s crucial we find a typeface that’s right for GOV.UK.
Webfonts is a technology in its infancy and while lots of websites use it, none do at the same scale and depth, with the same issues as us. This is a huge challenge and we’re working hard to get it right.
That’s one reason why a bunch of us went to the Ampersand conference recently. It’s the only conference in the UK specifically about web typography and type, and we’ve also been working with Jake Archibald well regarded as an expert in this field. (Big thanks to Jake and Simon and Nat from Lanyrd for helping us out.)
What doesn’t work now?
Picture from John Ploughman
The new typeface doesn’t work perfectly everywhere, we’re aware of that. It pretty much works on a Mac in all browsers and on Windows in Internet Explorer. It’s not quite there in Firefox or Chrome on a PC.
On release the font wasn’t caching on every page, we fixed that yesterday. The hinting stuff is harder to fix but we’re working on that now and you should see improvements with every release over the next few weeks.
Here’s a bit more detail on stuff we changed yesterday:
- Telling browsers to cache the font so that it doesn’t have to be reloaded on every request
- Making sure the page only loads the fonts it needs to speed up load times
- Scaling the default font so that the change when the font loads is less jarring
- Sending a slightly different version of the font which should render better for Internet Explorer users
Lots of work still to do – this stuff isn’t simple. But this is why we like to release public betas – you can do as much work as you like in the lab but you can’t beat testing in the real world. Thousands of users, many combinations of operating systems and browsers, user cases we’d never have thought of – all of this gives us brilliantly rich feedback.
Please take a look at the site and let us know what you think.