It’s time for variable web typography

This page uses the typeface Output Sans Variable by David Jonathan Ross. It’s a variable font that can be adjusted on two axes to change its weight and its obliqueness. So I only have load one single font file of 57 KB to create the 18 different styles you can see on this site. It opens up new possibilities for designing with text on the web with a great number of typographic expressions for an incredibly small font file. So clearly, variable fonts are the new hot thing for every type nerd since the introduction of web fonts. The technology shift is happening right now—2018 is the year variable fonts will be supported by all major browsers. I expect by 2019, they will be used as an alternative to static fonts. But how do they work and what can you do with them?

One simple explanation I picked up during my research is, that variable fonts are one font file that behaves like many. Traditionally for every single font weight or style, e.g. italic, bold or light expanded you need to load a corresponding font file. With one OpenType variable font file, you can generate multiple individual font styles and that at a very granular level.

The small file size comes from the fact, that each character only has one outline. The points that construct this outline have instructions how they should behave (or move) to create, for example, another weight. The individual styles then get interpolated, which means they get drawn dynamically inside the browser. In September 2016 OpenType Font Variations were publicly announced and are developed by Adobe, Apple, Google, and Microsoft together. This means things move forward relatively fast.

This always depends on the design of the typeface. Type designers are provided with various axes that can be adjusted dynamically to change the font’s weight, width or whatever they want. There are five reserved or registered axes for the most common cases: wdth for width, wght for weight, ital for italic, slnt for slant, opsz for optical size.

Most variable fonts provide a weight axis and the width axis seems to be very popular as well. But there can also be custom axes, giving type designer possibilities to change the thickness of serifs or the height of ascenders and descenders or whatever they come up with.

Let’s take a step back and ask ourselves why do we need different font styles at all? Typography gives words meaning through design, which means good typography can support the content, bad (or inappropriate) typography weakens it. Different styles of the same typeface make sense when they are unique enough to stand out. Concurrent they should be familiar enough by using the same design language. Compared to the regular weight, bold text emphasizes the meaning of something. It has to have a certain contrast to stand out, otherwise, it won’t do its job. Maybe semi-bold would not be different enough. The same goes with italic. Semi-Italic (or semi slanted – true italics are another topic on their own) do not make much sense for long reading text.

“Typography gives words meaning through design.”

But this guidelines mainly apply to body text or typography for long reading texts. Having a variety of weights might be beneficial for certain kinds of content, like page titles, headings or blockquotes, as you can see on this page. In that cases the typography can be more expressive and finely nuanced because the text usually is not that long. On this page, I really enjoyed breaking out of my habits and tried to design for typographic flexibility. It was not easy at first and I guess designers will have to change their mindset. But when they do they can achieve so much more and give content a stronger, more appropriate voice.

---

This text uses passages of my article How to start with variable fonts on the web. Check it out, if you want to know more about this topic. If you have any feedback, contact me on Twitter or write me an e-mail.