Variable fonts are one of the biggest game changers for web typography. We caught up with font technology consultant Laurence Penney, who will present a talk on this subject at Pixel Pioneers Bristol on 8 June, to discuss why variable fonts are such a big deal, how you can use them today and more
What are variable fonts, and why are they so exciting? Variable fonts are a new type of TrueType/OpenType font that allows an entire typeface family to be packaged as one small and powerful file. The font maker creates a small number of “master designs”, representing the key design stages of the typeface, leaving the generation of all the in-between fonts to the font rendering system. By embedding a Thin master and a Fat master in a single variable font, and also storing a number representing where each master sits on on a “weight axis”, we get thousands of intermediate-weight fonts for free, all of them mathematically interpolated from the masters. A “width axis” works similarly, letting the user summon everything from Condensed to Expanded. Multiple axes work together, so we get Narrow Thin, Expanded Semibold and literally millions of other variants. The user is free to choose any of the possible axis settings, but to keep things manageable the fontmaker gives friendly names to recommended settings — so-called “Named Instances”.
Variable fonts are ideal for use on the web thanks to their small size and the amazing versatility they make possible, including animation.
There are no practical limits to the number of axes or to the ways the axes combine their effects, so we’re seeing experimental fonts that are boggling the minds of seasoned font makers who try to visualise the typographic possibilities and to imagine the UI and automation that’ll be needed to control such fonts.
What’s the support like? Can you use variable fonts now, in the real world? It’s a great idea to start using them now. Fonts of one or two axes are pretty easy to get your head around. On the web, current versions of Safari, Chrome and Edge all support variable fonts (Firefox is coming very soon). Like other new CSS features, you should test for support and provide fallback, but you’ll be making bandwidth savings for the growing proportion of users who are ready.
Optimized CSS for variable fonts isn’t completely trivial — but Richard Rutter has written an excellent guide. On the desktop, Illustrator and Photoshop are ready, with InDesign expected soon. You’re even able to use the Named Instances in traditional apps that lack an axis-based UI — TextEdit, Keynote, Microsoft Word.
What are your favourite examples of variable fonts in the wild and why? The Ampersand 2018 conference website uses Source Sans variable throughout. The typography isn’t flashy, it just uses variable fonts to deploy a RWD website very efficiently, with fallback done properly.
Why did you create Axis-Praxis and what have you learned from running the site? Variable fonts were first presented at the ATypI conference in September 2016, but there was no place to play with the exciting technology. So I set to work creating one. About a month later I launched Axis-Praxis, a website that lets people try variable fonts in a simple typesetting interface, and where font makers can test their own variable fonts. Very well received, the site has developed into a repository for variable fonts, working UI ideas, resources and articles.
How do you optimise the performance of web fonts? Subsetting and using WOFF2 compression work just as well on variable fonts as they do on regular fonts. There’s even work being done on lossy compression.
What can UX designers and front-end developers do to improve web typography? The best channel to follow right now is Mozilla’s Jen Simmons on YouTube. She shows better than anyone else how to make use of all the new typographic CSS, which allows incredible control over how typography adapts to different devices. I can also recommend Web Typography, Richard Rutter’s excellent book published in 2017.
How can you create your own variable font? It’s not for the faint-hearted, but I can recommend the Glyphs app as the easiest route. There’s even a tutorial online. Start with a simple shape: make a square in the capital A slot, make a second master layer, copy and paste the square into the second layer, and change the shape (without adding or deleting points). Make a Weight axis, set the first master at one end, the second master at the other end, and export a variable font. You’re done! Ok, I oversimplified somewhat, but making a variable font is fundamentally about specifying how a default shape morphs into other shapes. Read up about what a “design space” is before you go much further. And ask for help online — there are plenty of enthusiastic people willing this technology to succeed.
What would you hope people take away from your talk at Pixel Pioneers Bristol? Support is actually getting pretty good, so that’s no longer the main challenge. We have to face deeper questions: What kind of UI and automation are needed for users? What kind of UI and tools are needed for font makers? How to link axes that need to work in tandem? Do we need to allow the font’s multi-dimensional design space to be distorted? How should we license and price them?
What I’d love to see is talented CSS designers and font makers understanding each other’s specialities better, and working closely together to make wonderful fonts and layouts.
Apart from Laurence's variable fonts talk, Pixel Pioneers Bristol on 8 June features seven other talks covering design systems, inclusive design, perceived performance, variable fonts, and more. There are also two workshops on easy and affordable user testing and UX psychology on 7 June. Tickets are still on sale.