Choosing a new typeface for the Hackney Council website

The entire process was content-focussed and user-centred

We recently worked with Hackney Council to improve the quality of typography on their website.

The council’s website has been using Montserrat from Google Fonts as the main typeface, but the team had received complaints about legibility. They asked us to help improve things.

Problems with the typeface

A screenshot of Montserrat on the Hackney website
A screenshot of Montserrat on the Hackney website

After some initial analysis of the issue, we identified 3 main problems:

  1. the font weight on the website was too light to be accessible
  2. Montserrat characters were too wide to be used for paragraphs of body text
  3. the style of Montserrat didn’t match with the content

Our approach

A process diagram showing how we move through projects: preparation, prototyping and testing, and then development and deployment
A process diagram showing how we move through projects: preparation, prototyping and testing, and then development and deployment

In typography, there are many aspects that can improve legibility and readability. However, Hackney had asked us to find a quick fix, so we designed a 2 day content-first approach. Typography is never a task of just choosing a typeface – it’s a process that we have to test with users so we have a better chance of making the right decision.

As the designer on the project, I was responsible for selecting a new and appropriate typeface, and then applying it to the Hackney Council website. Making sure the entire process was content-focussed and user-centred.

The project team had 4 members, including me as a visual designer, a project manager from dxw, and a service designer and front-end developer from Hackney. We worked together on various steps of the process, from new typeface selection and prototype evaluation to the actual implementation.

We broke down the process into 3 parts:

Preparation – day zero

Before choosing the typeface and website development process, there was some preparation to be done. First we had to get the brief sorted out and then get a sample of website content.

The brief

We asked the client some questions to help us form a website brief for the project. We asked questions like:

Once we got answers to our questions, the brief looked like this:

Sample content

Besides getting a website brief, we also asked Hackney to provide a few pages of content for prototyping and testing. Taking a content-first approach, means we don’t design without content and we try to avoid using “lorem ipsum” type text. If there’s no existing content, then it’s better to find similar content elsewhere. Luckily, the content for our project was on the live site already. Hackney suggested using the homepage, search results page, and 3 other content pages for prototyping and testing.

Prototyping and testing – day 1

We were then able to start the work. At this stage, we went through the following process:

It looks like a typical design thinking process, right? Although it was a small project, this was still the right way to meet the project brief.

Drafting the typeface selection criteria

The brief is essential because our typeface shortlisting criteria is based on the interpretation of it. The criteria for the new typeface looked something like this:

Shortlisting typefaces

With the above selection criteria, we visited websites of some of the webfont providers to look for suitable candidates including:

Google Fonts is the favourite of a lot of people, including me. However, before you jump to Google Fonts to look for your typefaces, I suggest you do your shortlisting on Adobe Typekit. All Google Fonts typefaces are also available on the Adobe Typekit website, but Adobe Typekit provides a better search filter. This is what the filter looks like on Adobe Typekit:

The filter on Adobe Fonts showing how fonts look by their weight, width, x-height, and so on
The filter on Adobe Fonts showing how fonts look by their weight, width, x-height, and so on

Properties like x-height and stroke contrast are all available in the filter, which makes our shortlisting process easier. A similar filter is also available on Fonts.com:

Filter on Fonts.com showing things like price, weight, width and so on
Filter on Fonts.com showing things like price, weight, width and so on

As a result, we shortlisted 3 typefaces in our primary search:

The next step was to apply the typefaces to the prototype.

Prototyping

Since we asked for sample content from Hackney for prototyping purposes, all we needed to do was to download the web pages, update the CSS rules and then upload the prototype so that it could be shared with our testers. Here’s the prototype homepage we uploaded to Heroku:

The prototype page on Heroku
The prototype page on Heroku

And here’s an example of how the typefaces look on the same piece of content:

Prototype showing how the 3 fonts will work with the same type of content
Prototype showing how the 3 fonts will work with the same type of content

We presented the prototype to the client and although they were happy with it, they wanted to compare this with the system font Arial, which is a very safe option suggested by the GOV.UK Design System. This was a good suggestion so we iterated on the prototype by adding Arial as well as Montserrat to it.

Given all the options, my personal choice was Open Sans. I like it personally, but the legibility and the harmony between the nature of the content and the style of the typeface also stand out. Of course, things shouldn’t be decided without good evidence so we moved to the next stage – testing.

Testing

Finally, it was time to share the prototype with our users. Since it was a mini-project, instead of hiring a user researcher, Hackney ICT helped to share the prototype with internal users and stakeholders. The Service Designer designed an online questionnaire to collect feedback and we measured the results against the brief.

With limited time, we collected feedback from a handful users. The results showed some positive feedback for all the shortlisted typefaces when comparing with the original Montserrat, especially for the improvement in legibility. And between the 3 typefaces, our users found the style of Open Sans the best, followed by Roboto, and CT Sans.

Although the sample size is relatively small here, the result also showed that Arial (one of the most common system fonts) was rated as good as Open Sans. So Hackney also asked if I could provide my recommendation based on best practice. Some of my comments were:

Hackney were happy with our recommendations and chose Open Sans. Further iterations could have happened here but we felt they weren’t necessary in this case.

Development and deployment – day 2

After the prototyping and testing was done, I started to work together with the developer to implement the changes. The main task of the day was to replace Montserrat with Open Sans. Here’s the detail of the process:

We tested the staging site again after all those CSS changes to find out if there were any unexpected outcomes. For example, we found that the changes were not applied to the search results page in the first place. After a couple of rounds of iteration, the website was deployed in a more legible and brand new style.

The Hackney Council homepage with the new typeface
The Hackney Council homepage with the new typeface

There are a lot more things that can be done to improve legibility and readability by using typography skills. For example, we should pay attention to the combination of font size, line width, and line height to find out the best shape of paragraphs.

Adjusting all of these things will certainly involve a lot more work, including changes to the layout like page width. We gave Hackney our suggestions so they can work on this when they get a chance in the future.

Further reading

If you are interested in learning more about web typography, I would recommend the book Better web typography for a better web by Matej Latin.