Customising and animating the weight of a typeface yourself? That is now possible with variable fonts!
When you download a font (Roboto, for example), you have to install several files at the same time (Light, Italic, Regular, Bold, and so on) — a dozen in total. With variable fonts, only one file is required, and that single file contains all of the typeface’s characteristics.
To modify the font, all you need to do is work with the CSS: unlike a classic font, you can add options that each have a specific role: weight, width, optical size, slant, italic, and so on. (The available options may vary depending on the variable font selected.)
In the example below, we have illustrated the “AvenirNext” variable font. The aim of this example is to move a font from a width of 1000 to 50 using a hover (and a delay of 1.5 seconds). Try hovering over the text in the CodePen below!
See the Pen Variable fonts by Matthieu (@Matthieu87) on CodePen.
This example applies to the AvenirNext typeface, but there are also other fonts with other characteristics, such as Decovar, which has more than 15 of them.
In addition to working on web pages with CSS, variable fonts also work in graphic design software such as the Adobe suite.
Screenshot of Photoshop showing the options of a variable font. Source: webdesign.tutsplus.com
