{"id":273367,"date":"2018-07-20T12:28:35","date_gmt":"2018-07-20T19:28:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=273367"},"modified":"2018-07-20T12:28:35","modified_gmt":"2018-07-20T19:28:35","slug":"weird-things-variable-fonts-can-do","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/weird-things-variable-fonts-can-do\/","title":{"rendered":"Weird things variable fonts can do"},"content":{"rendered":"

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<\/a>:<\/p>\n

<\/p>\n

Make sure to go play around at v-fonts.com<\/a> as well for loads of variable font demonstrations.<\/p>\n

But things like boldness, width, and slantyness and just a few<\/em> 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.<\/p>\n

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

Here’s some, ahem, weirder<\/em> things that variable fonts can do.<\/p>\n

A variable font can change its own serifyness<\/h3>\n
\n

A typical job for a variable font is changing weight\/width\/slant… but it really can be _anything_. <\/p>\n

Foreday is a font where you can change it's serifyness(1).https:\/\/t.co\/t4soiQaYqH<\/a><\/p>\n

(1) real word now ok. pic.twitter.com\/5X0oGauUbf<\/a><\/p>\n

— Chris Coyier (@chriscoyier) April 24, 2018<\/a><\/p><\/blockquote>\n

A variable font can be used for animation<\/h3>\n

Kind of like sprite sheet animation!<\/p>\n

\n

Y'all seem to be pretty into ➡️ variable fonts doing weird things ⬅️ so here's another mind-blower. pic.twitter.com\/U2ok2tR6r8<\/a><\/p>\n

— Chris Coyier (@chriscoyier) May 3, 2018<\/a><\/p><\/blockquote>\n

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

A variable font can adjust its own attributes on three different axes<\/h3>\n
\n

Another variable font thing that's pretty 😲 https:\/\/t.co\/dzp92UxXqX<\/a> pic.twitter.com\/1mLxIhqoVR<\/a><\/p>\n

— Chris Coyier (@chriscoyier) May 2, 2018<\/a><\/p><\/blockquote>\n

A variable font can change the hat on some poop<\/h3>\n
\n

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<\/a> pic.twitter.com\/X3ylXzqtnT<\/a><\/p>\n

— Roel Nieskens (@pixelambacht) May 8, 2018<\/a><\/p><\/blockquote>\n

A variable font can make the grass grow<\/h3>\n

This is a demo by Mandy Michael<\/a> using Decovar<\/a>, a “multistyle decorative variable font” by David Berlow.<\/p>\n

See the Pen Grassy Text with Variable fonts.<\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n

Decovar is weird.<\/p>\n

A variable font can make blood drip<\/h3>\n

This one is called Krabat<\/a> by Josef\u00edna Karl\u00edkov\u00e1:<\/p>\n

There are loads of cool ones on The Next Big Thing in Type<\/a> to check out. Here’s another awesome one<\/a>:<\/p>\n

\n

Variable fonts are a ripe field for experimentation!<\/p>\n