https://gds.blog.gov.uk/2014/03/05/new-transport-for-gov-uk/

New Transport for GOV.UK

You may not have noticed, but we recently changed the bit that says 'GOV.UK' in the black banner that appears across the website. It now uses New Transport, the same typeface that we use across the rest of the website. Previously it used Gill Sans.

Early versions of GOV.UK used Gill Sans, so it made sense to have the banner using the same typeface. When we changed the website to use New Transport in 2012 we kept the banner in Gill to reassure users that it was the same website as before.

Then we got a bit busy working on more important things, before recently realising that we still hadn't updated the masthead.

Alex and I made a first release of the banner in New Transport at the beginning of January this year. Henrick (who co-designed New Transport) then helped us to finesse when he dropped by the office a couple of weeks ago.

This image shows the evolution of the masthead from early 2012 to today:

GOV.UK masthead

Replacing the image file with text gives us a few practical advantages too:

  • the text will scale better to different zoom levels, viewport sizes, pixel densities without any real effort on our part
  • simpler CSS for print views
  • better progressive enhancement for browsers without CSS support or images, which is a bit niche but good to do

12 comments

  1. Lee Maguire

    Given the increase in screen pixel density (e.g. "Retina" screens) has any assessment been given to when it would be appropriate to replace the crown image png (and other appropriate elements) with a scalable SVG asset?

    Has GDS made, or is planning to make, an assessment of the impact of switching to SVG for users to GOV.UK?

    Link to this comment
    • Mark Hurrell

      Hey Lee

      At the moment for the crown we're providing all devices with the oversampled or 'retina ready' PNG, then using CSS to ensure it displays at the correct CSS-pixel dimensions for the layout. If you use web-inspector on the crown image, the PNG assets actual height is 62px, but the CSS is sizing it to 31px.

      This technique isn't brilliant in every context, but with the crown image the increase in file size for the retina image is negligible and it works with any browser that supports CSS.

      We're not decided against using SVG in the future, but with this context and at this time the PNG approach seems better.

      Link to this comment
  2. dave

    really? how much public money was spent on tweaking a font?

    Link to this comment
    • Mark Hurrell

      Hi Dave, the change hasn't directly cost any money. The typeface is the same one we have already licensed and used across GOV.UK for the last 18 months.

      Link to this comment
      • Jason

        Dave is right. You are paying someone a very significant salary to spend time on this. Is there nothing better to do - like fix border IT which keeps going fdown?

        And you licensed the font? You paid for it? Was that money well spent?

        What will a public accounts inquiry make of this?

        Link to this comment
        • Jack

          Dave/Jason,

          Do you think Apple waste money by paying for consistent, beautiful and useful design in their products? Because last time I looked they seemed to be one of the most successful businesses on earth...

          You know, just because 'government' is publicly run it doesn't mean stuff they do has to look rubbish and be unloved by its customers. You might want to save a few thousand quid by using Comic Sans everywhere, but when you are building a product for use by MILLIONS of people, spending a bit money on design is a good idea IMO.

          Link to this comment
    • John

      Paying attention to details like this, and the culture that encourages such attention, has numerous benefits. They're just hard to measure directly.

      Spending small amounts of money on iterative maintenance and improvement tends to be cheaper and less disruptive than having to replace everything occasionally when the website/app falls into disrepair.

      Link to this comment
  3. Benjamin Rusholme

    I prefered the simpler styling of the G present in Gill Sans.

    It does make sense to use New Transport throughout though, and to use text rather than an image file.

    Link to this comment
  4. Chris

    Hi Mark

    Always pleased to see attention to detail at GDS! Is New Transport available for others to use? Or if not, when will it be opened up? Thanks

    Link to this comment
  5. Richard Best

    I am with David and Jason.
    I don't want my tax paying for expensive Apple Macs for trendy designers spending hours tweaking fonts.
    Why are there so few complaints? Is it because only the luvvies visit this blog?

    Link to this comment
  6. benny

    I really love simple and neat design from gov.uk, and also the blog, all of it. neat, fast, clean and light. not sure if all this possible in our country (Indonesia).

    Link to this comment
  7. Anna

    I'm really pleased to see changes like this being communicated - though it doesn't effect much it's brought about a consistency and users can trust you'll also keep us informed of the big changes! After all, that's a huge part of change management (http://www.practicus.com/en-gb/insights/a-guide-to-effective-change-communications.aspx)

    Link to this comment