Variable fonts are perhaps the biggest thing to happen to web typography since the advent of web fonts. They are poised to add another layer of flexibility to the web designer’s toolbox. Because these fonts can contain numerous styles within a single file, they open up new possibilities in special effects and efficiency.
While the number of available variable font packages is growing, the selection isn’t huge just yet. And then there’s the whole issue regarding lack of support in older browsers. But those limitations aren’t going to last much longer. Thus, it’s a good idea to study up now.
We’ve collected some fantastic variable font examples to help demonstrate what is possible. Just note that, in order to actually see these examples in their full glory, you’ll need to use the latest version of Chrome, Edge, Firefox, Opera or Safari.
Glyphs are kind of a big deal these days, with the likes of Font Awesome and Dashicons being in such wide use. In this example, a variable font with a single glyph of an emoji horse was used to create a nifty animation. Through the use of CSS
font-variation-settings, the author was able to ensure an ultra-smooth effect.
Animate Your (Font) Weight
One of the big advantages of having the entirety of a font’s styles in one file is that you can transition between them in a snap. In this case, we see a highly-detailed and mesmerizing animation between different weights of the IBM Plex Sans font.
Here’s an example of a variable font being used as part of a larger piece of online art. Instead of animating a single word or headline, this snippet mimics a poster – albeit an animated one. The transition from hollow characters to filled (and back again) is truly slick. The sequencing is spot on. Years ago, this might have taken hours of tedious work in Flash to accomplish.
Perhaps no snippet in this collection better demonstrates what a variable font is than this one. Use the sliders at the bottom of the screen to add custom weight, stretch and sizing to the Venn VF font. Notice the ease with which the settings changes are displayed.
Have It Your Way
At first glance, this example looks like a nicely-formatted poem. But there’s more than just a basic title and text here. Click on the “Jigger the First Stanza” and “Rejigger Title” buttons to the right and you’ll be in for a treat. Font styles change fluidly and instantaneously. And it’s a great demonstration of how individual characters can be targeted as well.
In this example, various selections of text are highlighted in a paragraph. What’s especially neat about this technique is that it uses Intersection Observer to target text as it comes into view. The initial highlighting is actually just a slight color variance, but hover over that text to view an attention-grabbing animation.
The Full Effect
Let’s close things out with something quite unique. This snippet uses the WHOA variable font to create an incredible 3D effect that shifts the view of this outline text based on your cursor position. Again, this is something that, a few years ago, would require some serious animation software to achieve. Now, the different perspectives are built right into the font. From there, it’s a matter of using some clever coding to put it in motion.
A New Era in Typography
With the use of variable fonts, web typography has become an even greater resource for creating a compelling UX. Thanks to their ability to instantly change styles and target specific characters through data splitting, a whole new level of special effects are possible.
As the examples above demonstrate, there is plenty of room for creativity. And what’s really exciting is that the fonts themselves have so many goodies baked right in.
That being said, we’re really just beginning to scratch the surface of what these fonts can do. It will be amazing to see what the future brings.
- Set Your Text in Motion with These Dazzling Effects
- A Look at Text Distortion Effects in Web Design
- 10 Incredible Text Masking Effects Examples
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- 8 Fantastic Pure CSS Border Effect Code Snippets