Insights

New website: Fontsmith Variable Fonts

You might be surprised to know that not many designers have used—or are even aware of—variable fonts. Admittedly, we were in this camp when first starting this project.

Unlike us however, typographers have been excitedly talking about them for years, with articles and talks on the subject going back to the beginning of 2015. This excitement seems to only recently be filtering through to the wider design community, and all for the better!

With support already in design applications like Illustrator, Photoshop, Sketch and coming to InDesign in the near future, it won’t be long until variable fonts mature as a technology and become more and more integrated into designers’ creative workflows.

The majority of our clients need their websites to work in older browsers (such as Internet Explorer 11), and browser support for variable fonts isn’t wide enough yet for us to fully embrace the technology. So, when Fontsmith came to us with their idea for a microsite, and a range of variable fonts to play with, we were excited to get our hands on the tech.

Our first step, as with any project, was research. Like us, your first question might be: what are variable fonts?

Variable fonts

A variable font is one font file where you’d normally have many. Historically we’d have to load a different file for every weight or style of the font you use. Most websites will use at least a few weights, most commonly regular, italic, bold and bold italic. So that’s already four font files to load, and that’s assuming you only use one typeface.

The problem is that the more files you have to load, the slower your website will fire up. And we know that if your website is taking more than 3 seconds to load, you’re losing customers.

With variable fonts, we can load just one file and get access to not just the usual variants, but the whole scale. So if the bold is too bold, but the medium isn’t quite bold enough, you can pick a number somewhere in between. 578 weight? Not a problem. Want to increase the optical sizing slightly for better legibility? Now you can.

The brief

Fontsmith’s brief was to create a super cool, shareable website demonstrating the variable fonts they had been developing, whilst also contributing to the rise and uptake of this new technology. The site needed to plant a stake in the ever-increasing variable font landscape, be an exciting playground for designers, developers and everyone in between, and showcase a cutting edge while still remaining undeniably Fontsmith.

The design process

We explored lots of different ideas early on (special mention goes to one involving an interactive hole in the wall font game) and collaborated closely with the Fontsmith team throughout the design process.

variable fonts early concept
An early design concept

One of the challenges was accomplishing all of this on a strict budget. Simplicity in design and build became increasingly important as we progressed and iterated through different designs. We felt interactivity was a crucial component to the site, and wanted visitors to play with the fonts, test them out, and see just how broad the possibilities actually are.

This was partly achieved through an informative ‘About’ page, explaining all their various benefits and uses with animated – super cool – graphics (more on that below). We also designed a home page resembling something of a ‘sweet shop’ of variability, with each typeface linking through to an editable, interactive page showcasing the fonts in all their glory. Each typeface is heroed and given the entire screen real estate, with clear call to actions encouraging users to download the respective trial fonts. A mixture of typefaces in display and paragraph sizes creates pace, keeping users engaged, and intuitive editable controls and smooth colour transitions come together to tick all the required boxes.

Animation

One of the really exciting things about variable fonts, from a design perspective, is the opportunity for animation. As you might expect, we took full advantage and had loads of fun experimenting with Drawbot, a Python based graphics application. Drawbot allows you to use code to create animated sequences (read: GIFs) of fonts by directly manipulating their axes. Looking at code isn’t usually part of a designer’s day job, but thankfully, having two knowledgeable developers as part of our team has its perks! As a team we often lean on each other to solve all sorts of problems, with this being just one example.

variable fonts animating with drawbot
Animating with Drawbot

Credit also needs to go to Johannes Lang, whose Python scripts we repurposed and reshaped to achieve the super smooth animations you see on the site. If you’re interested in having a play around yourself, you can find those scripts on GitHub.

We spent a lot of time designing and perfecting a user experience that is as fluid as it is joyful to use. As they say, delight is in the detail, and we left no stone unturned.

variable fonts error page
Error page

The build

Our biggest concern about the build was performance. Google did some research last year that revealed 53% of mobile users abandon a webpage that takes longer than three seconds to load. The site needed to feel smooth and fast to pull off the fun, easy-going design. We are always striving to achieve optimum web performance, but with this one, we were facing two new challenges.

variable fonts mobile responsive design
Designing for mobile

Firstly, animating fonts can be costly to the browser and cause the site to run slowly. This is because every time the font needs to move even just one pixel, the browser has to repaint the content. The more repaints, the more sluggish the website can feel.

Secondly, we had a large number of variable fonts to upload. And while one variable font file is far smaller than all the variants as separate files, the variable font file itself is quite large. And we needed to load at least nine. In three seconds.

To make sure we could achieve this, we employed every trick in the book to keep everything else on the site as performant as possible. Instead of a regular multi-page site, we built a single-page application. The difference between the two is that a single-page application feels much more like an app. When you click on a link, rather than loading new pages, it swaps the content of the page you’re already on. This feels faster to the user and allows us to do some clever behind-the-scenes loading, taking some of the pressure off of the browser.

To keep build time to a minimum, and maximise performance, we used a JavaScript framework called Vue.js. It’s lightweight but powerful, and it enabled us to build a smooth and speedy site with minimal development time.

The result

A super cool, interactive showcase of Fontsmith’s new variable font range that we’re really proud of. See for yourself.

variable-fonts.com