Thursday, July 18

Weird things variable fonts can do

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:


Make sure to go play around at 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!

The post Weird things variable fonts can do appeared first on CSS-Tricks.


0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x