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 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 typical job for a variable font is changing weight/width/slant… but it really can be _anything_.
Foreday is a font where you can change it's serifyness(1).https://t.co/t4soiQaYqH
(1) real word now ok. pic.twitter.com/5X0oGauUbf
— Chris Coyier (@chriscoyier) April 24, 2018
A variable font can be used for animation
Kind of like sprite sheet animation!
Y'all seem to be pretty into ➡️ variable fonts doing weird things ⬅️ so here's another mind-blower. pic.twitter.com/U2ok2tR6r8
— Chris Coyier (@chriscoyier) May 3, 2018
A variable font can adjust its own attributes on three different axes
— Chris Coyier (@chriscoyier) May 2, 2018
A variable font can change the hat on some poop
— Roel Nieskens (@pixelambacht) May 8, 2018
A variable font can make the grass grow
Decovar is weird.
A variable font can make blood drip
This one is called Krabat by Josefína Karlíková:
Variable fonts are a ripe field for experimentation!
Source: CSS Tricks