Variable Fonts

Variable Fonts

Recently I visited this year’s dotCSS conference in Paris and I was very inspired by all the great talks around CSS. One talk that stood out for me in particular, was Mandy Michael talking about variable fonts. I’ve been following her work on twitter and codepen and was super excited to have the opportunity to hear her on stage.

Fonts matter

Typography is a crucial part of web design and usability. Choosing the right font can affect legibility, readability, and accessibility. Variable fonts have a lot of advantages as fonts, but also make an entire set of features that can bring a new level to web design in a developer-friendly way.

What is a variable font?

A variable font contains an entire font family, not just one style or instance. The glyph outlines in a variable font morph between various family shapes using interpolation techniques defined in the OpenType 1.8.1 specification. This specification was the result of a remarkable working collaboration between Adobe, Apple, Google, and Microsoft. Although variable fonts have been around for a while, they haven't been adopted as widely as they should be despite their many advantages.

Why developers love variable fonts

And even though there are many more options in a variable font they are all contained in a single file. Previously, using the bold and regular version of a font would require two different files, each a similar size. From a developers point of view, the advantages of this are clear. A smaller file size, fewer font data files, and faster load times. Furthermore, one file means only one HTTP request. All major browsers support variable fonts.

See the Pen Variable fonts simple demo by Mandy Michael (@mandymichael) on CodePen.

Beyond the X-Axis

Variable fonts offer advantages from a designers perspective as well, such as a much more flexible design range than traditional fonts. They also allow for fine-tuning in a way that empowers designers. A single variable font supports a large number of customizable axes including weight, width, and a third axis. These options have millions of combinations and give designers the power to do anything from decreasing the size of capital letters or change the number of leaves on a plant-themed font.

Some variable fonts have a “grade” axis that allows you to change the weight without changing the width. While this might seem like a simple thing it can mean that you can ensure UI elements stay a constant size even when bolded or otherwise changed.

Responsive design

All of these features mean that you can use various fonts as an addition to responsive designs. You can make the weight of a headline a function of the screen size, or adjust the size of the text to increase readability no matter where your users are viewing your site. You can even use variable fonts to make animations that aren't video files or gifs and are therefore searchable just like any other text on the site.

See the Pen Grassy Text with Variable fonts. by Mandy Michael (@mandymichael) on CodePen.

The only current disadvantage of variable fonts is that there are fewer available, but with big companies releasing new ones every day, this is changing quickly.


See the Pen Variable Fonts by Sarah Geissberger (@sarahgeissberger) on CodePen.

You can play with some variable fonts here

At Amazee Labs, we are passionate about the projects we use and the tools we use. Get in touch with us to learn more.

Related Information