"Can you animate variable fonts with CSS?" I’ve gotten this question from a couple of newsletter readers, so I thought a blog post would be a good way to answer this question too. The answer is: Yes! And the key to animating them is the font-variation-settings property.
Font-variation-settings is the key
The font-variation-settings property is the key here. It’s an animatable property and you can use it to animate any of the variable axes of a given variable font by using the four letter axis name and providing a value within its accepted range. That sounds a bit complex, but essentially it means that what you can animate via this property depends on the font you’re using.
The exact values will vary from font to font, but it will look a little something like this:
font-variation-settings: "MONO" 0, "CASL" 1, "CRSV" 0, "wght" 1000, "slnt" 0;
Here’s a CodePen example showing what it looks like to animate Recursive, an open source variable font with lots of variation options:
See the Pen
CSS variable font anim example by Val Head (@valhead)
on CodePen.
(Note: the font-variation-settings property is the way to go for animation, but when you’re using variable fonts for non-animated typography, other properties like font-weight and such will serve you better. Variablefonts.io has lots of great advice in that area.)
Find what your variable font can do
Not all variable fonts have their own site or live demo to show all the available axes, so wakamaifondue.com really comes in handy. It will show you the names of the variable axes, the range of values each takes, and previews of what various combinations will look like. That’s hugely helpful when planning out your animation or even just to see what your options are.
Splitting.js for some extra fun
Splitting.js makes it super easy to target each character, or even each word individually, while animating your variable fonts. It’s not required to animate them, but it can definitely make things more interesting like this breathing animation that Michelle made.
Get inspired!
For some really great variable font animation inspiration (both with CSS and JS), check out Mandy’s awesome collection of variable font experiments!
A note about performance
One thing to keep in mind is that while variable fonts are well supported in modern browsers, animating them is still considered a bit experimental. Currently animating them can’t be hardware accelerated and will cause repaints which isn’t so great for performance. I hope this may change as variable fonts become more widely used, and especially so if web designers show a lot of interest in being able to animate them. For now, animate variable fonts with caution in production but experiment away for fun to see what they can do!
