From the course: CSS: Animation
Unlock the full course today
Join today to access over 24,400 courses taught by industry experts.
Animating variable fonts with CSS - CSS Tutorial
From the course: CSS: Animation
Animating variable fonts with CSS
- [Instructor] Variable fonts are a game changer for web typography. A variable font is a font file that is able to store a continuous range of design variants and we can animate those variants with CSS. The key to animating variable fonts is the font-variation-settings property. We can animate any access of variation defined in the font itself with the font-variation-settings property. The variants available to animate will vary from font to font and a site like wakamaifondue.com can help show you the options that are available for any given variable font. For example, if I drop a copy of the Recursive variable font on the site, it will give me this report of all the characteristics and variable axes available in this particular font. I can even test them out right here to see what they look like. Many fonts will show their variable properties on their websites as well like Recursive does here. Looking at the demo…