Variable Fonts: opening the door to a whole new typography

I’ve made a few mentions about variable fonts over the past weeks, and it’s high time I explain myself — and them — because they are really remarkable. So remarkable in fact that they’re just about the only thing I’ve been talking about at conferences since September of 2016 when they were introduced. In truth, I think they are the most significant development for design on the web since the advent of responsive design. A bold claim, but one that I feel confident history will bear out.

Let me explain

For as long as we’ve the ability to use linked or embedded fonts on the web, we have had to do that by including a separate font file for every weight, variant, or width that we want to use. So for typical websites, that means a routine collection of regular, italic, bold, and bold italic font files for whatever typeface we choose for body copy, and sometimes another one or two for headings or display purposes. These design decisions are often guided as much by overall user experience (UX) and performance considerations as they are typographic ones, since the more fonts you load, the more impact it can have on download times, data use, and delays in final page rendering so the visitor can actually see your site. As I wrote a couple weeks back, this has lead to a whole canon of advice on what is ‘good’ typography that is questionable at best — and in many cases simply false.

Well, at ATypI Warsaw in September 2016, that changed. Or at least that was the…