Friends! Comrades! .woff enthusiasts!
This is Adventures in Typography, a newsletter from me, Robin Rendle, all about typefaces and fonts and what those two words mean.
Over on CSS-Tricks this week I jotted down some notes about how we can improve the text in dark mode interfaces because, well, I’ve started to notice a problem. The issue is this: our eyes see white text on dark backgrounds in a peculiar way and it’s often much harder to read (and I find it much harder to design for, requiring me to stare at it for hours and hours until I get it right).
Anyway, it’s easy to make typographic mistakes with dark mode UIs because it’s hard enough just to switch out the colors — it often requires a ton of refactoring and making a well maintained design system in the process. So, problems like this can happen quite easily:
Notice how the example on the right feels more bold than the text on the left? Well, it’s not! It’s the same font-weight, it’s just because our eyes process these inverse colors differently.
This is where variable fonts come in: the nifty thing about them is that we can make the font-weight lighter and make things easier to read in the process. We don’t need to load a new font, we can just ever-so-slightly nudge a few numbers around when our dark mode UI is activated:
See? It’s a tiny difference between these weights but I’d argue that the dark mode UI is now a little bit easier to read because of this change. (Also, this reminds me that most changes are hard to see at first but build up into something great).
My point in bringing this up though isn’t to rally behind dark mode interfaces, yet I do tend to use them a lot, but instead I want to focus on the font itself; I think it’s problems like the ones above that show the real value of variable fonts. It shows us how they’re capable of creating more subtle and nuanced interfaces than we’ve been allowed to in the past.
This brings me to Seraph which happens to be a rather lovely variable front from Bernd Volmer. It has a ton of styles contained within it, from slab and sans to wedge, tuskan, and calligraphic. Here, take a peek:
And that’s not including all the various weights of each style, too. But putting that aside, the website here is what interests me the most. Because variable fonts sure can solve annoying legibility problems like the dark-mode/text-weight issue but they can also just be fun! And exciting! And weird!
Here’s one example of how Bernd animates between all these different styles:
This thing makes me want to go write a horror story or a thriller and spend all day making entirely buck-wild animations and CSS experiments. Although, it’s worth pointing out that variable fonts are no longer on the typographic fringe any more: Google Fonts now has an absolute ton of them and there are great guides that explain how to use them in depth and galleries of variable fonts exist with lots of examples.
The most exciting thing to me about this is that this all feels like an thrilling change that will soon become the boring standard.
About a year ago I remember chatting with a pal and she mentioned that she didn’t know how to do this one thing with CSS. And it shocked me — gasp! — you don’t know how to do this? But then I realized you no longer have to learn this one weird trick. The way we build websites today has exponentially improved over the past few years, to such an extent that half the dumb tricks and practices I’ve learned over the years are now entirely irrelevant.
And I’m not complaining here — this is exciting! It shows how far we’ve all pushed the web forward; one tiny, incremental nudge, one after another, until now where all these new features click-clack together into an unrecognizably powerful box of tools.
The same is happening with variable fonts too, as Stephen Coles put it best, “eventually, all new fonts will be variable and we’ll just call them fonts.”
Until next time!
✌️ Robin