Weird things variable fonts can do

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that’s a common use case. Just check out many of the interactive demos over at Axis-Praxis:

or

Make sure to go play around at v-fonts.com as well for loads of variable font demonstrations.

But things like boldness, width, and slantyness and just a few of the attributes that a type designer might want to make controllable. There are no rules that say you have to make boldness a controllable attribute. Literally, anything is possible, and people have been experimenting with that quite a bit.

If you’re interested in variable fonts, we have a whole guide with all the best articles we’ve published on the subject.

Here’s some, ahem, weirder things that variable fonts can do.

A variable font can change its own serifyness

A variable font can be used for animation

Kind of like sprite sheet animation!

Toshi Omagari has made a number of absolutely bananas demos, including stuff like this pixelated video, which straight up breaks my brain:

A variable font can adjust its own attributes on three different axes

A variable font can change the hat on some poop

A variable font can make the grass grow

This is a demo by Mandy Michael using Decovar, a “multistyle decorative variable font” by David Berlow.

See the Pen Grassy Text with Variable fonts. by Mandy Michael (@mandymichael) on CodePen.

Decovar is weird.

A variable font can make blood drip

This one is called Krabat by Josefína Karlíková:

There are loads of cool ones on The Next Big Thing in Type to check out. Here’s another awesome one:


Variable fonts are a ripe field for experimentation!