Using Variable Fonts to create icon animations

Variable fonts has been around for quite some time already, but it has become a real interesting technique to use now when it has recently become available to use in the most popular browsers. So what can we do with it?

Here’s a quick background. Variable Fonts is a typeface format that lets a browser interpolate between glyph masters (a glyph means a character in a typeface) that the font maker is providing. In a real use case this means that instead of having to add all the different font weights that you want in a project in separate files you can have one file but still all the weights. Your browser makes the work for you. Here’s a closer look of how it works:

This is a standard typeface and all possible weights that can come with it. The type maker creates all the weights by hand, quite some work. Every weight is exported to separate files for you to use.

Now here’s how the Variable Font format is working:

Instead of creating every weight that’s going to be available you create masters, or extremes, that is going to tell the browser what i.e. is the thinnest or the thickest the typeface is allowed to look like. The browser can then interpolate the desired weight in between, and this is why you’re able to only use one file but still get all the weights.

Creating masters

Let’s say I want a typeface that can go from condensed to expanded. With Variable Fonts, all I need is two masters.

The first master will be the condensed character. This means that this will be the narrowest the typeface is allowed to look like.

The second master is the expanded character. And this will be the widest the typeface is allowed to look like. At Axis-Praxis you can check out and play with a bunch of experimental Variable Fonts.

And after you’ve checked that out you will notice that you’re able to create more things than just regular typefaces, for example icons with animations.

Create icons capable of being animated

It’s the browsers interpolation that makes the animation possible because the interpolation creates a transition, which means things move when they switch between the typeface’s masters. The creation of movable icons is made with the same technique as demonstrated before, but we’ll make it in three steps.

We’re making a hamburger icon that is going to be animated from an idle state to an active state, a cross.

So for the first master we create it like we want it to look like when the icon is in it’s idle state, like a hamburger icon that is not clicked. Think of it as this is the animation time at 0%.

The second master is what will be the animation time at 50%. This step is needed in order for the browser to understand that the icon will contract before it will expand to a cross.

And the third master is corresponding to the animation time at 100%. And it’s a cross. We’re done!

But how do we make it move?

It will take some CSS styling in order to make the icon work. First we need to add the font to our web project and then make a rule for it. Read this article to learn how to implement variable fonts to your project.

When we’ve installed the font we need to style the CSS-parameter dedicated to Variable Fonts called font-variation-settings. This is the parameter we can style all the axes with that comes with the Variable Fonts, and to make the icon move we want to style the "TIME" axis. This is a custom parameter created specifically for this typeface. And this is a thing, every Variable Fonts comes with different parameters possible to style, look up the typeface info to learn which parameter that is available for styling.

Anyways, if we want to make the icon move, we’ll set the idle state first:

.hamburger-icon {

font-variation-settings: "TIME" 0;

transition: 0.3s ease;

}

And then to make it move, when hovering for example, we do it like this:

.hamburger-icon:hover {

font-variation-settings: "TIME" 100;

}

This code will make the icon go from the idle state to active state when hovered. And you can also customize the transition to make it look like you want it. Easy, right!

I have made a website where you can check out my icon typeface, Variicons and play around with it. You’re also free to use it in your own projects, check it out on Github.