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.

Running Free

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.

See the Pen


Muybridge galloping horse by Laurence Penney

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.

See the Pen Variable font animation by Michelle Barker

Interactive Art

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.

See the Pen Variable Font Experiment No.2 by Mark Frömberg

Style Slider

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.

See the Pen Variable font demo by Frida Nyvall

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.

See the Pen


Goblin Market with Variable Fonts by Chris Coyier (@chriscoyier)

Highlights

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.

See the Pen Variable font – Animated over (weight) by Villads Claes

The Full Effect

When you combine variable fonts, CSS3 and JavaScript, great things can happen. And you don’t need to look further than this example to see why. This attractive text has a delightful stretchy hover effect, which is cool on its own. But change the included settings panel and you’ll get an even more in-depth sense of what is possible.

See the Pen Variable Fonts | Compressa by Juan Fuentes

So Slinky

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.

See the Pen Slinky Text – WHOA Variable font demo by Jérôme Sprenger Sèvegrand

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.