Variable Fonts: evolving our digital typography at John Lewis
Co-authored by Lewis Jones, User Interface Design Lead and Dominic Busby, Frontend Engineer at John Lewis Partnership.
We both work on the John Lewis Design System — designing and developing sharable user interface components; exploring and establishing new design patterns; and generating experience guidance. All of which is used in the creation of the John Lewis digital estate.
John Lewis is one of the most recognisable and well known brands in Britain. A core element of achieving that “Britishness” in its visual identity has been the long standing use of the Gill Sans typeface. We’ve used the typeface on and off throughout our history, and within our logo since 1972.
What didn’t work with Gill Sans online
Gill Sans was created in 1928 (initially for signage and posters) and quickly became the ubiquitous font for British design. However, some elements and characteristics haven’t translated well to digital channels in modern times. For example, the standard “regular” weight is bolder than modern equivalent body fonts.
Through customer feedback we found our experiences were sometimes hard to read, or monotonous and uninspiring. We hypothesised that some of this was down to our extensive use of the light-weight Gill Sans. More recent digital design tends to lean towards thicker fonts and typefaces, which are easier to read and clearer on all sizes of device.
The team had also picked up on a subtle, yet palpable, issue with our custom version of Gill Sans that had creeped into the user interface. Vertical alignment was unbalanced and had become particularly evident in buttons and other bordered text elements. Designers and developers were keen to re-calibrate those errors and so remove the small pockets of code that had been used to fix the alignment issues. Those alignment fixes didn’t always translate well across all browsers.
Refreshing our flagship font
These three core concerns (the need for thicker fonts, the feedback from customers and our own investigations of the user interface) prompted us to take a step back and re-evaluate our whole approach to typography and hierarchy, and led us to investigate the use of heavier fonts.
During this evolution we learned a number of things:
- The steps between the existing heavier weights were often too great and somewhat unwieldy when used digitally, leading to unbalanced interfaces.
- We were going to have to use more weights than we currently did, which brought up the concern of load performance on the client side.
- On the frontend our current font solution relied on three separate weights of the typeface being delivered to our customers. Even before the consideration of adding more weights, this seemed unnecessary, as newer technologies could reduce this dependency.
Our solution for these issues was to commission a variable font version of “Gill Sans Nova”*.
At first glance this is a design solution, but there were clear upsides and opportunities for the development teams as well. Not only improving the alignment issues, but also the use of one variable font, rather than three separate fonts, provided an opportunity to reduce the number of calls the client made to our server and make a reduction in the amount of code we sent back.
So the team had two key opportunities: a more flexible and harmonious user interface, delivered faster to our customers.
However, delivering a new variable font to our customers required a number of changes that the Design System team and our frontend teams needed to deliver. As we began to research the true impact of our new variable font we found an unexpected issue…
Fixing our workaround fixes
As mentioned above, the code base had been written to make amends for the alignment issues with the original Gill Sans font. However, throughout the CSS references were made to bolder font-weights, as a workaround to deliver a “normal” body weight to our customers. The variable font displayed the CSS as it was written and teams had to go through a process of “de-bolding” the frontend: any instances of font-weight: 500 had to be changed to font-weight: 400. Finally, code that was used to ‘fix’ those alignment issues ended up impacting the UI when displaying the new font. Minor padding fixes suddenly became ‘bugs’ when using a font without alignment issues.
The John Lewis Design System delivers the bulk of the user interface components and so the updates within the system dealt with many of the bolding issues, alignment fixes and updates. Coordination was also needed with some third-party vendors that deliver user interface changes to our site.
We coordinated bug bashes with all the development and testing teams and updated our deployed code to give our teams the opportunity to demo switching to the new font. One team volunteered to lead (testing the new font in lieu of the old three fonts) on performance testing. It could be a tricky process, teams occasionally being surprised by light-weighted fonts popping up here and there!
Over the course of a short deployment window the old fonts were no longer used, and the variable font became the new default, bringing with it opportunities to inspire, perfectly aligned text and a performance improvement to boot.
The result? A font to inspire, that’s still us
We want our customers to trust us and be delighted with the experience of shopping with us. A user interface that has foundational imperfections, such as typography mis-alignment, and lacks the flexibility to inspire and surprise was a problem shared by both design and development teams.
We’re really happy that by working in tandem and leveraging the opportunities of variable fonts, our digital products now better reflect our brand and our customer’s expectations. Variable fonts are a foundation upon which we can give more varied and exciting user experiences for our customers.
* Monotype created a new, digital friendly version, “Gill Sans Nova” in 2015, and we have our own cut off that (“Gill Sans Nova for John Lewis”) with minor customisations to some letter forms.
