Variable fonts have been officially supported by most browsers for quite a while. However usage of them didn't start to pickup until very recently. Here's a run down of how they work, and why you should start using them now.

What are Variable Fonts?

While a standard typeface comes with different files for weights, italics and other styles, a variable font is a single file that allows you to control its weight and other properties through variables.

In short, variable fonts are highly customisable.

Google's Roboto, for example, contains 12 different files. If you were to load all of them on your website to have access to different styles you would end up having to load 2 Megabytes.

A Variable Font will be able to offer the same amount of styles (and many more in between!) for about 700KB. Thanks to gzip compression we can bring that down to half, making it the size of a standard font.

What's so special about Variable Fonts?

In situations like these I think an example is worth a thousand words. So check out the example below by moving the sliders:

As you can see variable fonts allow for an almost unprecedented level of customisation. Rather than defining a different font for each different weight we can use a single font for many different effects.

The catch of course is that these customisations need to be baked into the font itself in order to work. In the example above, the font Inter supports variable weight and slant.

Weight and slant are called registered axes, which are officially supported variables along with italic, width and optical size. There are also custom axes, which can be any variable set by the type designer.

Stuff you should know before using variable fonts

While variable fonts are great and can really bring out the type on your website, you need to remember that they are still a developing technology. This means they are subject to change and breakage.

For example, to implement variable fonts on ironeko I had to add a special CSS rule, or italic text would not show.

// This slants my text rather than italicising it
em,
.italic,
i {
  font-variation-settings: "slnt" -10;
}

There's a couple of gotchas and hacks to get them to work properly, so don't be surprised if they don't work out of the box. But it is worth it.

Where can I start?

There's a lot of great fonts available so the choice is up to you. I really enjoy how the Inter font by Rasmus Andersson looks (which is the font you're reading right now!). Roboto is also available as a Variable Font thanks to TypeNetwork.

So what are variable fonts? They're anything you want them to be.

At ironeko we're big fans of using developing technologies like headless Wordpress and TailwindCSS so we just had to try them..

I suggest you start playing with variable fonts as soon as possible. I have no doubt that this will become a web-standard in no time, so get ahead of the game early.