The New Good Ol’ Days
Eighteen years into this game, I love to reminisce back to the good ol’ days of the early to mid-2000s when there was an explosion of creativity on the web. It felt fresh and unbridled, with boundaries expected to be pushed at every turn, and they were. This was mainly down to one thing, the thing of nightmares to some, Flash! It certainly had big inherent flaws, but love it or hate it, it certainly helped pave the way for what we expected from the open web, which felt like a long, drawn-out process. However, with some savage new advancements made over the last couple of years, I now feel that things are really starting to get proper juicy.
Several things come to mind that get me excited these days in designing and developing for the web, some widely adopted now like SVG (even though technically old) and WebGL animation, which draw some obvious parallels to the Flash era. Certainly CSS grid has stood up and made itself known, shouting from the parapets about how the shackles of layout are now a thing of the past. Kudos to people like Rachel Andrew and Jen Simmons for their serious efforts in educating us mere mortals in this area, helping make the learning curve and adoption that bit more palatable and accessible. Looking around today you can see how this has helped elevate the rise of more asymmetric layouts with design styles like Brutalism design going through a bit of a trend over the last year or so. But over time it felt as though typography took the back seat a bit with all the other successes happening in pushing the web forward. Now enter variable fonts. 🥳
Variable fonts have certainly piqued my interest this year. Not only do they give us the obvious boost in performance with fewer https requests and smaller sizes compared to the bundles of web fonts we all inject into our pages, but we also gain more control over typography in terms of readability and accessibility. Say goodbye to cheekily adding muddy sacrificial faux bold or italic styles to our CSS!
I feel that variable fonts have unlocked the door to new creative possibilities that we’re only just scratching the surface of. Having the ability to interpolate between different values in the axes in variable fonts just screams out for animation. We have a standardized set of registered axes in variable fonts like font-weight, font-stretch, font-style etc. which are straight forward enough to appreciate, but when it comes to custom axes when used in font-variation-settings, things start getting crazy and fun. Type designers can use the interpolation in custom axes to create some really off the wall things beyond, well, text. Just check out Typearture’s variable font experiments to see what I mean.
A few months back I was privileged to be invited to preview and test the upcoming release of GSAP 3 which I’m very excited about. Still a bit hush hush at the moment, but it boasts 50+ new features with half the file size. Sure it’ll prob be out by the time this is, but I’ll bite my tongue and not give anything away here just in case. This is currently my catnip: layering GSAP on top of variable fonts in CodePen to create some lovely kinetic typography in the DOM. This kind of magic, until now, has been more attributed to WebGL and After Effects. Throw GSAP plugins on top and you can really create some cool stuff. I would suggest however that you use this new creative power sparingly as it can cause your laptop fan to take off if you go too big with craziness due to browser reflow.
I really can’t wait to see what people will create using variable fonts over the next year as it becomes more widely adopted. Not just limited to typographic treatments in their layouts but also in terms of animation and micro-interactions.