We started using a new font on GOV.UK last week, and received feedback that it wasn't working in everyones browsers. Creative lead Chris Heathcote details the changes the team has made to make sure the font works well for everyone.
Since the latest beta release on 4th July, we've been using a webfont throughout GOV.UK (see Ben's post for why, and why we've chosen this particular font).
There have been a few issues we've encountered, and I wanted to explain what we've done to fix them so far, and document what we've found to work for other developers and designers wrestling with the same issues.
To serve webfonts, you need two kinds of file: Web Open Font Format (.woff) for most browsers and Embedded OpenType (.eot) for IE8 and earlier.
Turning your font (either a ttf or otf file) into woffs and eots isn't straightforward: there are online utilities for doing this (see font-squirrel and others) but for our font we were getting results that didn't render well on PCs (Chrome and Firefox in particular). We're now looking at using FontForge for woff conversion and still trying various utilities (including ttf2eot) to create the eot file. This fixes most of the issues with font rendering in Chrome, Firefox and Safari on PCs.
We've stripped out several font sizes from the site - IE doesn't understand very precise sizes (more than two decimal places) and certain sizes rendered better than others in IE8. So we've tweaked all the font sizes and this fixes some of the rendering issues in IE8, but we're still investigating and tuning to render the font more clearly.
We're using the WebFont Loader JavaScript library developed by Google and Typekit. This, if you set up the CSS classes correctly, means the webpage will use a native font such as Helvetica or Arial until the webfont has been loaded, and then switch them over. This means that at least the text can be seen, but there is a flash as the browser switches the fonts over.
We've solved the issue of the font flashing using several methods to reduce the loading time:
- We have set our css and font files to be cached by the browser using an Expires header set by our webserver.
- IE8 get served a different css file to other browsers - this means each browser only loads the font files it needs.
- We recut the font file with a reduced set of glyphs (letters, numbers, punctuation and other symbols) to just the characters we use on the site. This reduced the size by a third.
- We now only use one font weight throughout the site rather than two. This means there's only one font file to load.
The font is included directly in the css file using base64 encoding, rather than creating another http call. This is a bigger file to download the first time you visit the site, but this is then cached and shouldn't need to be downloaded again. Note that we're not using this technique to serve the font to IE8 - it has a maximum base64 data size of 32k, which we will go over as we add the characters needed for Welsh and other languages.
Between these fixes, we've got the font loading time from 500-1000ms to 1-2ms.
We're still evaluating the font and refining how we implement it. This has been a real team effort so far to get it working well: thanks to Mark, Mazz, Brad, JamesW, JamesS, Jamie, Ben, Alex, Dafydd (& Jake from Lanyrd).
10 comments
Comment by Ampersand 2013 - Red Badger posted on
[…] Here is a blog about how Gov.uk used Base64 - Webfonts in practice. […]
Comment by Designing for the long read on Inside Government | Government Digital Service posted on
[...] is where our typeface New Transport makes such a difference. For those living in the UK, the typeface Transport is such an omnipresent [...]
Comment by What devices are we supporting at launch, and why? | Government Digital Service posted on
[...] experience of launching the new GOV.UK font highlighted how significant the impact of an operating system can be on the look of a website. As [...]
Comment by Iterate. Then iterate again. | Government Digital Service posted on
[...] we can log and fix. You have already seen how we have responded to the feedback about the font and worked to fix those issues. However some feedback, especially regarding visual design, is more subjective and is harder to [...]
Comment by GDS' new webfont fiddle | Digital Politico posted on
[...] to alter the font of the BETA gov.uk site. Yesteday, Creative lead Chris Heathcote took to the GDS blog to explain some of the [...]
Comment by Brad Dunzer posted on
Glad to see that you guys are really taking the effort to extreme levels to get this right. Also pointing out how hard this can be to get working properly. The services like Typekit and ours WebINK spend a lot of engineering time mastering all of what you have been through. But so far you guys are doing a nice job.
I was a bit curious so I took a look around the site and the font as well and seems you guys are limiting yourselves a bit by only serving up WOFF and EOT and not a TTF as well. You are missing some browser versions by not having a TTF available.
As Matthew pointed out you are serving up a OTF wrapped in that WOFF and that is pretty nice for some smooth rendering at certain sizes on Windows computers. Be careful if you go to a lighter font weight as this might not hold up so well as a hinted TTF file.
I looked at the characters you removed from the font subset and was interested to see that you took the font down to a bit less than a full western European subset - the WOFF turns out to be around 20kb. I was surprised to see you removed the Cedilla from the font as well, even though you have the German and French characters inside the font.
Also you mentioned one item in the blog above about the download being so much faster due to the base64 encoding and the reduced http request. From my end I see a 47kb file for that font.css and it shows about 400ms to come down. Since you have to put in the WOFF and EOT base64 for your @font-face stack it can make for a larger than needed download. By bulling that EOT base64 out of the CSS when its not a IE8 or below you can save some download time.
I would really at getting a hinted TTF into the mix to cover older browsers and also iOS and Android devices. If I can be of any help please let me know.
Comment by Andy Key posted on
"...we’ve been using a webfont throughout GOV.UK (see Ben’s post for why, and why we’ve chosen this particular font)."
Ben didn't actully say why, did he? What he said was, "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..."
Were I a cynic (oh no, not me) I'd read the subtext here as, "We want to use webfonts 'cos they're cool and cutting edge and we're graphic designers and we think Helvetica is boooring, and eventually we'll think of a plausible excuse. OK, so it'll take ages to sort it all out and even then it probably won't work properly for lots of people out there on old browsers and old PCs, but hey, it looks great on my Mac here in the office."
I'm exaggerating unfairly of course, but you do need to keep thinking about who you're designing this website for.
The Transport typeface was designed for legibility: the ability to distinguish individual letters in single words on a road sign a long way away. Fonts used in body text need to flow nicely, guiding the eye along multiple lines. Has there been any testing to show that Transport works well as a readable font, as opposed to a legible one?
Comment by Rod posted on
I agree. I came here because I was surprised to see body text rendered as if to teach little children to recognize letter shapes. Yes, it looks "nice" to people who are only looking at how it looks. I don't believe it helps make the site usable.
Comment by benterrett posted on
Hi Andy, thanks for your feedback. I'll elaborate a bit on some of our choices.
We are investigating using web fonts because it gives us more control of the typography on GOV.UK. On most pages GOV.UK is just text which makes typography even more important than usual.
There is absolutely no way we would ever say "We want to use webfonts ‘cos they’re cool". We are relentless focused on user need.
One advantage New Transport has over Helvetica (for example) is that certain letters like the lower case l have a slight tail on the bottom of the character which makes it easier to read. What's important to people with dyslexia or other visual or cognitive issues is the differences between the shapes the words form. New Transport is better at this than Helvetica (for example).
IMHO "legibility" and "readibility" are too often unhelpful web design terms that get used incorrectly and add confusion rather than aid healthy discussion. What we're talking about here is - is the text easy to read? The answer to this involves more than just typeface. It concerns line length, spacing, colour and so on. We think the latest version of the site is easy to read, early user testing backs this up and we'll be doing more user testing and sharing that here.
Lastly, but importantly, this is just one iteration of the beta version of GOV.UK. We are trying out New Transport for this version and it may well change.
Thanks for taking an interest in what we're doing.
Comment by Matthew Brown posted on
So it looks like you're sending postscript fonts to FF & Chrome, which makes them fall back to greyscale outlining (so they look a little better). Still, I don't understand why you're relying on an unhinted font when there are tons and tons of hinted ones that look much better on screen (available via TypeKit and elsewhere).