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
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
Another variable font thing that’s pretty 😲 https://t.co/dzp92UxXqX pic.twitter.com/1mLxIhqoVR
— Chris Coyier (@chriscoyier) May 2, 2018
A variable font can change the hat on some poop
I hope you don’t mind me tootin’ my own horn, but there’s also the glorious pioneering work of a variable color font called… Mr. Poo: https://t.co/aE2qWE69Cm pic.twitter.com/X3ylXzqtnT
— Roel Nieskens (@pixelambacht) May 8, 2018
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.