Implementing the Telegraph’s Variable Font

The Challenge

The Telegraph website uses a commissioned web font family called Austin News. Due to performance constraints, only a small set of the family was available to designers.

I was tasked with bringing more Austin News styles to the website without affecting performance.

The Solution

I was able to access a variable font version of Austin News from the original font foundry. I would be able to create a set of WOFF2 fonts files with this variable font. In order to best optimize the files, I first needed to understand how the existing font was used.

I conducted an audit to determining the most commonly used character on the site. I wrote a Node.js script to scrape the top ten thousand articles from across the site, counting up the most used characters. I was able to define the optimal Unicode range for the base fonts with this information.

Top 100 most common characters on the Telegraph website

I created a visual tool that allowed the designer to modify each of the font’s variation setting using the sliders. The WOFF2 files and accompanying CSS code were created using these values and the Unicode range.

The variable font was rolled out on the site to the excitement of both designers and developers. The font family’s full range of styles was now available to designers, while also reducing the overall number and size of files being downloaded.

Project skills