One year in: an update on Variable Fonts
It’s a few weeks on from ATypI Montréal, and between that event, TypeCon in Boston just before, and more recent announcements at AdobeMAX, there’s a lot to talk about with Variable Fonts. ATypI in particular was host to an amazing collection of characters and companies involved in their development and use. Starting with 3 of the workshops on Tuesday, to 6 or 7 talks that touched on them, to the release of iOS 11 with support for Variable Fonts enabled by default — it was certainly a pretty momentous week. I had conversations daily with folks from the major driving forces (Adobe, Apple, Google, Microsoft, Monotype, Type Network) to individual designers and independent foundries on topics ranging from use cases to implementation techniques, and of course about licensing. Considering that this week (September 14th to be precise) marks the one year anniversary of the announcement of Variable Fonts, it’s a remarkable state of affairs indeed.
Let me take a moment and recap what Variable Fonts are, and a bit about why they’re going to be such a significant development on the web and on other digital platforms. Let’s look at what they are and how they’re different from what’s currently the norm:
All the variations of width, weight, slant, and a few other permutations can be contained in only one file (maybe 2 for separate italics). This means faster load times and fewer downloads for your website visitors. Currently if you wanted to use all the weights and variants of Open Sans, for example, you would have to load 18 different files (at least).
With all the permutations in one or two files, that means the typography itself can be more varied and expressive. That translates to better brand identity and clearer calls to action for your customers when they visit your site. Due to the number of files currently required, in most cases designers must limit themselves to only 4–5 weights and variants of different typefaces, greatly limiting their typographic voice on a given site. This gives us access to every combination imaginable from the thinnest hairline to the heaviest slab, narrow to wide — whatever the type designer chooses to include.
Because all the changes can be controlled via CSS, the text on your site can scale in more ways to be more readable on small screens, or even with longer languages (such as German versus English, where German words are generally longer). This makes your site more user-friendly and readable across a wider array of screen sizes, light conditions or language combinations.
Here’s an example that I recorded straight out of the browser on Laurence Penney’s indispensable Variable Font playground site Axis-Praxis.org. This shows variations in width, weight and slant in action:
Support so far
Browsers & CSS support
As of today (October 22nd, 2017), you can see variable fonts in action in Safari (MacOS High Sierra and iOS 11) and in the latest version of Chrome (62) on both Mac and Windows. Support is in active development in Edge and Firefox, but no firm word on when that will launch fully in either browser. Jen Simmons was kind enough to point me here to follow along with progress in Firefox, and you can follow development in Edge here.
Get involved! Follow along and participate in the discussion about evolving support in CSS, you can do that over here.
OS support
Operating system support is now there in both MacOS High Sierra and Windows 10 Fall Creators Update (enabling you to access the ‘named instances’ within variable fonts, such as ‘bold’ or ‘light condensed’).
Applications
Application support just started to show up with Adobe shipping new versions of Photoshop and Illustrator.
Glyphs has support for variable features in font design and creation in beta, with support in version 2.5 coming.
FontLab VI (currently in public preview) will ship with full support for variable fonts as well, and you can download it now to try for yourself.
DrawBot just announced support for them as well!
Fonts & Resources
There are a growing number of fonts available. Here are a few places to look:
- Axis-Praxis.org lists a bunch of variable fonts and lets you try them out in the browser
- Github (lots of projects being hosted here — this search will list a bunch)
- Dan Rhatigan wrote about the Adobe announcement and linked to some fonts on the Typekit blog
- TypeNetwork has two amazing resources: a wonderful introduction to the new format and a more technical section on the variation proposals (h/t to litherland for sending me those!)
- David Jonathan Ross has a few different variable fonts available on his site (he’s also been kind enough to let me include them in my talks and demos)
- CJ Dunn also has variable fonts available on his foundry site (and has been equally generous in providing fonts for talks and demos)
- I’ve put up a series of sample pages on my site that also links to a Github repository of them that you can play with yourself
- Follow @VariableFonts on Twitter (curated by Nick Sherman) and the #VariableFonts hashtag for more resources, announcements, and links
ATypI Montéal 2017
Workshops
Starting on Tuesday we had several half- or full-day workshops touching upon Variable Fonts: Laurence gave on making them, the Glyphs app guys gave one on Variable Font support in their application, and I gave a full-day workshop on Responsive Typography and Variable Fonts. While the first half of mine was mainly focused on implementing a good typographic system well (performance, proportion, polish), the second half of the day was devoted to working with and discussing Variable Fonts. We had a real treat in that Laurence joined us for most of the afternoon, as did Peter Constable, Senior Program Manager for the Windows DirectWrite Text Platform at Microsoft, and one of the key participants from Microsoft in the consortium behind the introduction of the format. It was a real treat to have such tremendous insights into the market forces behind their development all the way to the nuts and bolts of the technical specifications of the format. I don’t think I could have come up with a better outcome, and I really think the students got a lot out of it.
Talks and Teasers
While I’ve given a few talks about the benefits and potential implementation scenarios with Variable Fonts at TypeCon and other events this year (see ‘Variable Fonts and the Future of Web Design’ on my site—voted one of the ‘Best Of’ at this year’s CSS Dev Conf!), at ATypI Montreal I was asked to change it up a little bit since TypeCon was so close in time and geography. So for Montreal I wrote something that focused more specifically on typographic systems, how much we can do on the web, and how important it is that we don’t let go the nuance and polish that we’ve developed over centuries in print simply because it takes a little work to do similar things in pixels. Titled ‘Intentional Typography in Dynamic Systems,’ I tried to make the case that we can achieve thoughtful, refined typography on the web, make it work even better by reacting to language and other factors for fine-tuning the system, and leverage Variable Fonts’ capabilities to challenge what we can do with typography and take that practice even further (slides and sample code here). But my talk was certainly not the only one on the subject! There were a few others that really dug into different aspects and applications of the new format and capabilities.
Adobe Typography Customer Board Update
Yves Peters gave an excellent update on his and others efforts as part of the Adobe Typography Customer Advisory Board to help encourage Adobe to improve access and usability of typographic features across their products. It’s remarkable to see how much Adobe has been listening to their input, and that was shown in emphatic and exciting style by Vinod Balakrishnan, one of the leads on the Photoshop engineering team. An unannounced addition to Yves’ talk, Vinod came up and gave an incredible live demonstration of an entirely new interface in Photoshop. It fully supports Variable Fonts and is currently in beta, and was (surprise!) released last week!.
The introduction the industry needs
Peter Constable gave a talk titled ‘Axes, tuples and deltas — oh my!’ that brought the technology into focus in a wonderfully simple and understandable style. Using an ultra-approachable metaphor of mixing paint colors, he makes the case for and illustrates the underlying concepts of variable fonts in a highly entertaining fashion.
Developments in Arabic
Sahar Afshar gave a wonderful overview of recent developments in Arabic type design and some insightful thoughts on the connection between history, voice and technology. What I found so compelling was that even though I don’t know much about the language, she was able to so clearly and compellingly draw connections between the history, meaning, and the letterforms themselves. It was a real treat. You should check out her whole talk; I’ve just included a tiny snippet here.
User interface evolutions
Santiago Orozco took a fascinating look at how user interfaces for taking advantage of variable fonts might evolve. I have to admit: the idea of building in these features into native touch-based applications looks really promising.
If you liked this write-up, please help me share it! I think it’s critical that more designers and developers come to understand the technology and how it can enable better design. If you’re interested in my initial thoughts from when this was first introduced, you might want to check out “Variable Fonts and the Future of Web Design” (the genesis of the talk I’ve been giving this year) or more generally, my experiences at ATypI Warsaw last year when they were announced.
👋🏾 Get to know the people and ideas shaping the products we use every day. Subscribe to Noteworthy — the product & design newsletter written by the Journal team.
