📝 CSS-Tricks 278: Variable Fonts and accent-color

View this newsletter on the web.

[Robin]: Not so long ago, David Jonathan Ross (whose newsletter you should subscribe to because he sends out a free font with each edition) wrote about how variable fonts are still, oddly enough, seen as an experimental font format despite being well supported in browsers:

In my perception, they’re in a bit of an awkward phase right now. Support in browsers is great, and designers are using techniques such as animation to push the limits of the technology — after five years we can hardly think of them as a shiny new toy. But at the same time I don’t think they’ve fully left the “experimental” realm and entered the day-to-day workflow of the average designer.

I hate to admit it but this feels about right to me. As much as I’ve played around with variable fonts, I haven’t used them in a single production client project yet. But that’s kind of silly because they’re five years old(!) now. There’s nothing stopping us from using variable fonts all over the place, especially with how prolific they now are on Google Fonts now.

So why aren’t we using more variable fonts?

This was my first thought this weekend when I spotted the ever-so-incredible Tilt type family. Designed by Andy Clymer back in 2019, it has three styles based on the signage he found around New York City. But what’s amazing about Tilt isn’t just the shape and style of each letter (although that’s pretty darn swell). Instead, the remarkable thing about it is how Andy built a variable font that lets you change the position of these letters in three-dimensional space.

Andy writes:

With the advent of the variable font format, I like to think that a designer is freed from the traditional layout of a family of type. Tilt doesn’t give a designer variable control over the parameters you might expect — such as weight and width — but instead lets you dial in the “Horizontal Rotation” (HROT) and “Vertical Rotation” (VROT) of the tilting letterforms.

After looking at the repo over at GitHub, I started plotting my evil scheme to experiment with variable fonts more and investigate what can be done with them.

After about ten minutes of faffing about, I made this little demo:

It’s amazing to me that this is just a splash of CSS combined with this fancy variable font, and it works without any JavaScript at all. Not only that, but the speed at which I could tie all this stuff together was just shocking.

Okay, to get started, we first need to import the font family with CSS as you would any other font:

@font-face { font-family: "Tilt"; src: url("TiltPrism.woff2") format("woff2"); }

Then we can use custom variables to set the axis that we’ll animate on hover…

:root { --HROT: 0; --VROT: 0; }

From here, we can set the styles for our h1 element…

h1 { color: blue; font-family: Tilt; font-size: 200px; font-weight: 100; font-variation-settings: "HROT" var(--HROT), "VROT" var(--VROT); transition: all 3s linear; }

See that font-variation-settings property? That’s how we change the axes of a variable font. It might be the width, height, or style, but you can see there’s HROT and VROT, both of which are set with the variables we added on the :root.

All we need to do now is add the hover styles to trigger the animation:

h1:hover { --HROT: -66; --VROT: -100; color: red; }

And there we have it! A completely buck wild animation that would fit perfectly on a sci-fi website. I can even imagine all this going one step further. Perhaps we animate each letter independently and make it look as if the letters are floating in space without gravity. Or we could make them pop up from the center of the screen and explode away from each other.

All this is a great reminder that typography on the web is shockingly powerful and more advanced than it was a few years ago. And it’s a great reminder that we should all be pushing that frontier a little further.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s