[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.
🔘 ☑️ 🔘
Chris mentioned that we’re real close to being able to implement custom radios and checkboxes with zero trickery. All we need is the accent-color CSS property, like this:
input[type="radio"],
input[type="checkbox"] {
width: 3em;
height: 3rem;
accent-color: green;
}This is what it looks like in Firefox and Chrome…
Well, except…
We’re so close to having some very simple CSS to accomplish the main use-case for custom checkboxes and radios. But no cigar, that is, unless you can bring yourself to just not care about the Safari UI (it is still perfectly functional, after all).
Honestly, I’m fine with Safari looking a bit off since it’s still perfectly accessible, even if it doesn’t look all that swell. But if you want to change way more than just the color, Stephanie Eckles, thankfully, has written this fantastic piece about custom radio buttons and custom checkboxes with just CSS.
I’ve been thoroughly enjoying this series all about Git by Tobias Günther, starting off with how to create the perfect commit and then walking through how to collaborate with pull requests, how to rebase or merge and, most recently, how to cherry-pick commits.
If I was being honest here, I’d say that I’m a pretty lazy Git-commiter. I get super excited about solving a problem and then get super excited about solving another problem, and all that leads to an enormous pull request that tackles everything under the sun in a haphazard sort of way.
And it wasn’t until Tobias’s series on Git that made me realize that this is not only pretty unproductive, also unkind to the folks reviewing the code. Clear communication and kindness — that’s what a good pull request looks like.
📈 📉 📊
I did a quick performance check with PageSpeed Insights the other day and noticed the results were way more intuitive. And from the looks of it, a ton of great improvements shipped. It’s worth testing your sites again real quick because I’m finding it way faster to see performance issues I need to fix.
Sponsor
Save Big on Jetpack and WooCommerce Week-Long Black Friday Deals
The sale your WordPress site has been waiting for all year has arrived! Save 60% on Jetpack annual plans starting today. And be sure to mark your calendar for this Wednesday because that’s when you save a whopping 40% on all WooCommerce Marketplace products.
Sponsor
ImageKit.io
Are videos impacting your page’s load time? Now, Deliver optimized videos in the right format, quality and size based on the user’s device in real-time. Delivering stunning visual experiences just got simpler. Try ImageKit’s forever-free plan today!
[Chris]: Cloudflare seems so big to me. So many sites run their DNS through them for all the performance benefits and the fact that they are pretty much the only tech out there that actually fully protects against DDoS crap. But now they have that Workers product that feels like next-gen cloud functions because of how fast they are and have access to storage. Now they are innovating on realtime technology helpers. Then they are like… how about S3 only you pay for zero bandwidth? (R2). And how about a tremendously usable authentication product? And the fact that we aren’t going to charge you like crazy for teams. And a website hosting product that runs your builds. They do so much stuff, do it all so well, offer genuine innovation, and do it quickly.
And yet, they aren’t that big. They are going to have to really fight to become the fourth biggest cloud player. Shawn Wang has a great writeup of all this, where he notes this:
When your market cap is $36 billion and your next biggest competitor is worth $1.6 trillion (~45x larger, albeit not pure-play), this is a bold statement.
Point taken — but I dunno, it feels more inevitable at this point than a long shot. I never do this (mostly because I don’t exactly have money to throw around), but I’ve bought some Cloudflare stock. It just feels like everything they are doing is super well poised to blow up.