Variable Fonts: a talk with Laurence Penney
Late in 2017 Clara Weinreich of Slanted Publishers posed 11 questions to Laurence Penney. The resulting conversation was first published in Yearbook of Type #3 (Slanted Publishers, April 2018). Read it here, slightly revised.
Please tell us a little bit about yourself and your work
I’ve been a typography nut (as well as a cartography and cataloguing nut) since my teens, and I love writing programs and making databases that explore the digital potential of those obsessions. During my computer science degree I sketched out a system to create fonts using typographic parameters — that experience led to my first job in font engineering, and later consultancy for font companies. I was a founder member of the MyFonts.com team and helped to build the company into the leading retail font space.
The variable font announcement at the ATypI conference in September 2016 was really inspiring. (For a typographer’s view on their potential, read Tim Brown’s blog post.) For me, it brought to mind the atmosphere of the early 1990s when several companies were competing with very similar ideas for the future of typography. Unfortunately, back then, the web came along and everybody got distracted for a while. This time though, Apple, Adobe, Google and Microsoft are all working to a common goal: to support variable fonts in their operating systems, in their app suites, in web browsers.
It was a somewhat frustrating that there was, initially, nowhere to play with variable fonts. In October 2016 I launched Axis-Praxis, a website for designers to try out variable fonts in a simple typesetting interface, and for font makers to test and show off their own variable fonts. Since then I’ve been spreading the word about variable fonts in talks and workshops for font makers and web designers, and consulting for font makers.
What fascinates you about Variable Fonts?
Many things!
1. They open up what’s been implicit in type design ever since there were type families. We’ve always been able to imagine a font somewhere between Regular and Bold, a font between Condensed and Extra Condensed. Variable fonts let us, as font users, dial up the exact weight and width we want.
2. We’re not limited to weight and width, but to anything about the letter-shapes that the typeface designer conceives as being smoothly adjustable: optical size, slant angle, x-height, serif length, descender height.
3. The idea works just as well on non-alphabetic shapes: icons often have stroke width, which can be varied along a weight axis. For emoji icons, we can imagine custom variation axes for the shapes of eyes, ears, mouths and hairstyles, or for custom adjustments of any symbol.
4. We can animate! Imagine that clicking the Bold button animates the transition between Regular and Bold, subtly informing the user of the many possibilities between them. For icons and emoji, variable fonts are probably the most efficient way to get them moving. They compare very well against SVG, PNG, GIF and other icon formats: vector outlines, colour layers, hundreds saved in one small file, and there are often Unicode IDs to make them super-accessible.
5. Efficiency. A single variable font isn’t much larger than a single regular font, yet contains within it the potential for many thousands of fonts. Consequently the web, which once suppressed enthusiasm for these fonts, is now their biggest fan.
6. The technological history is fascinating. Modern variable fonts are an almost exact revival of an early 1990s Apple technology, TrueType GX Variations. Apple had a specification ready, proved it worked on devices considerably less powerful than an Apple Watch, and is cooperating with Adobe, Microsoft and Google on the rebirth.
7. It’s interesting how the ideas brought to the fore by variable fonts have always been in typeface designers’ minds and in their daily practice. Adobe introduced Multiple Master technology in 1991, and since then, even though the technology died away for end users, font editors have offered interpolation between master designs.
8. This time it’ll be the web that leads the way in typography, not desktop apps. UX designers and front-end developers are typography’s new vanguard. The browsers are ready or almost ready, the CSS to control them works well, the front-end developers are eager to play, the bandwidth obsessives will be seduced by the small size. Desktop will play catch-up.
What technological aspects make a font variable and useable today?
Compared with a regular font, a variable font requires a couple of extra data tables. The first is “fvar” (font variations) that sets up the abstract design space in which the font’s glyphs change shape. A design space is made up of a number of “variation axes”, each of which has a minimum, a default and a maximum setting. Every variable font has at least one variation axis; in theory a font can have thousands of axes. The second required table is “gvar” (glyph variations) where it is defined exactly how a glyph’s control points shift around as axis settings change. By setting positions on each axis, the font adjusts every glyph, causing a new virtual instance of the font to be created: not only the standard styles of Regular, Bold Extended, Light Italic, but anything in between.
To help users and apps understand what’s in these versatile fonts, so-called “named instances” are added to the font. These are tiny records, each only a few bytes in size, that define a style (e.g. “Extra Bold”) within a variable font. A named instance record contains a set of axis positions that regenerates that static font instance. So a variable font presents itself to users as a manageable set of fonts, like those in a traditional font family. It’s expected that simple apps will let users access only the named instances.
We create variable fonts in various ways. Of the well-known font editors, Glyphs is already able to make them, as is Robofont (when combined with Superpolator and the Batch extension). Open-source fans tend to use the free fontmake utility. FontLab VI looks like it will be the most powerful, but isn’t quite ready. Font hackers explore the possibilities by using the fontTools Python library or by typing raw XML code and compiling their fonts with the TTX tool. And of course they write their own tools.
What has to happen or rather, what innovations are still needed to make Variable Fonts usable on all devices?
First, I’ll take the question to mean variable fonts in websites. At the time of writing, variable fonts work great in Safari on the latest macOS (v10.13) and iOS (v11) devices. Support in Microsoft Edge arrived in January 2018 for users who install the “Insider Preview” Windows update. But the browser that runs, now, on virtually all devices is Google Chrome: Chrome v62, released October 17 2017, includes the FreeType font rendering library, which Google and others have updated for variable font support. This means that even though your old Windows 7 computer or Android phone doesn’t support variable fonts natively, Chrome takes over and everything’s fine. To sum up the browser situation: by the end of 2018 all the big ones will support variable fonts. All that a web publisher needs to switch to variable fonts is an enthusiastic front-end developer.
Next we should mention the Adobe Creative Cloud apps. In October 2017 Adobe updated Photoshop and Illustrator to support variable fonts — InDesign is left out of the fun for now. For all the complaints about being tied into monthly payments, one great thing about software subscriptions is that customers get the latest software releases right away. So, when Adobe says they’re supported in Creative Cloud, font makers can immediately sell variable fonts to millions of users.
We should also talk about apps in general. Remarkably, it’s been easy to make a Mac app that handles variable fonts, complete with axis sliders, ever since 1994 (not a typo!). Very few developers chose to do so — hardly surprising given there was only a single font to use. Yet remember the named instances, which allow the variable font to present itself as multiple normal fonts. Already we can install a variable font in macOS, and the named instances appear in apps as if they are regular fonts. Microsoft has now made that happen for Office apps including Word. For the manual adjustment of axes, we’ll have to wait and see what UI the app designers come up with. So far, Adobe has gone for simple sliders. However there’s lots of talk about sliders not being the best way to choose fonts — dials, 2D interfaces, switches, touch and more are being discussed.
Finally, there needs to be an infrastructure for licensing and distribution of these new fonts. It’s still unclear how variable fonts will be licensed and priced. Best practices for their deployment on the web, alongside static fonts for older browsers, still have to be worked out [Richard Rutter’s article is essential reading]. You can be sure that Adobe Typekit and Monotype are working hard on all those issues, and Google on the latter at least. Yet agile independent foundries and distributors such as Fontstand and Type Network might have the edge. Designers eager to try these fonts should contact the makers directly—in this experimental period there are many foundries willing to work with designers on mutually beneficial terms (yes, it’s worth asking if you can try them for free).
What are the advantages of Variable Fonts for the end user in your opinion?
Of course we must always distinguish at least two kinds of “end user” in typography — are we speaking of the designer who, expertly or not, chooses fonts and arranges type; or do we refer to the reader who reads the type, typically knowing little about the craft?
Many designers will appreciate being able to choose exactly the weight and width that’s right for their project, or being able to iterate towards an ideal. On the other hand variable fonts open the way for many kinds of automated systems, that choose ideal axis settings depending on the document, the device size and the viewing conditions. Imagine width adjustments for text so that it fits in a particular box, or x-heights being matched between two fonts, or the optical size axis setting being chosen automatically (this last one already happens in Safari). For the wilder possibilities, animated colour emoji and so on, it’s difficult to predict the actual benefits — the main danger is confusing designers with too many options.
For the reader, we foresee websites with clear information hierarchies built of many font weights, loading sites without waiting for megabytes of webfonts. Any website that uses both a Regular and a Bold weight of a font should arrive more quickly. Some websites and apps will give the reader control over certain variable axes. For example an app can allow smooth adjustment of font density, giving the user the power to set up an optimal interaction experience under various lighting conditions — any website the user frequents could benefit, but more importantly so could an in-car navigation app where clarity is crucial.
Animation, though sometimes misused, can certainly be a force for good. We’ll see more expressive interaction design and more beautiful motion typography thanks to animated variable fonts.
Please explain Axis-Praxis to us. What is it and why did you create it? Was there a specific event or impulse that made you start?
The simple reason that Axis-Praxis exists is that I needed somewhere to play with variable fonts. Although there’d been the announcement of the new format at ATypI, it was effectively a format with no fonts, no apps to use the fonts if they existed, and virtually no tools to make the fonts. Yet the old Apple GX variable fonts by pioneers such as David Berlow and Erik van Blokland were circulating among font engineers, and enthusiastic type designers — Christoph Koeberlin, David Jonathan Ross, CJ Dunn and others — were making new variable fonts and offering them as free downloads.
When I noticed variable font support was added to a development version of Safari, I got to work and made an environment where I could drag & drop fonts and type text. It turned out that other people liked it a lot, and soon after the launch I was offered many more fonts for the site. It has developed into a resource for fonts, background articles, ideas about the future of variable fonts, reminders of similar activity back in the 1990s, and a playground for self-contained experiments (an animated horse, a rotating cube UI showing 3 axes, and some “fit-to-width” demos).
For the updated version, which debuted in April 2017, I added:
- individual specimens for each typeface,
- a magnifier to zoom into subtle adjustments,
- a CSS inspector,
- a font inspector to check axis ranges, resources and validation,
- typographic controls (font-size, line-spacing, colour, alignment, OpenType features),
- a share button to publish new specimens for drag-dropped fonts.
How would you define your role in the world of typography? Do you see yourself, for example, as a mediator between software developers, type designers and end users, or is it something else entirely?
Interesting question, and I am pretty satisfied with your suggested answer. I would add CSS experts as the most vital group we font technologists must engage with. We have a lot to learn from each other.
Are there large qualitative differences among the existing Variable Fonts that can be seen and tried out via Axis-Praxis?
It’s still an experimental period, so it’s been great to see glimpses of the possibilities of the technology. Several of the fonts simply offer weight and width adjustment. David Berlow has offered two experimental new fonts showing the very different ways variable fonts can be used: Amstelvar is intended for control by an application, so that its nine axes adjust automatically to the situation the font finds itself in; Decovar has 15 axes, each of which acts best as a kind of switch between two choices of serif or interior treatment. Zycon, also by Berlow but from the early 1990s, shows how versatile the variation can be, using intermediate adjustments to define rotations of clock hands, the leg movements of a lizard, the phases of the moon. Other fonts shows off variations of optical size, grade (density), how extreme we might imagine a width axis, and how variation adapts well to a Chinese font.
Is Axis-Praxis a way for type designers to exchange ideas and understand each others’ process?
Axis-Praxis is not a discussion forum — Type Drawers, the Glyphs forum and Robofont forum are probably the best places for that. But font designers definitely learn by playing with the fonts there, and sometimes return the favour by sending me their own variable fonts to add to the specimens.
What is your favorite typeface and if it is not variable, should there be a variable companion?
For years I’ve been in love with FF Clifford, a beautiful text typeface from 1999 based on two Scottish designs from the 18th century. Its designer, Akira Kobayashi, not satisfied with a single design for use at all sizes, designed three optical sizes named Six, Nine and Eighteen (after their recommended point sizes). It’s the perfect candidate for an optical size axis, so I was very happy when Monotype started using it as a public guinea pig for their experiments with variable fonts.
Would you say Variable Fonts are the future of typography?
That’s a big question, but I think they’ll definitely play a significant role. Many kinds of variation have been added to CSS in recent years — the paradigm known as responsive web design—and variable fonts are a perfect fit. Web and print designers will realize it’s possible to have fonts such that all the “in between” fonts are available, and will love being free of the fixed sets of fonts that traditional families offered. This new demand will push font makers to offer their fonts as variable. Are there any typefaces for which a variation axis is undesirable? I may be caught up in all the excitement, but right now I can’t think of one.
Video recordings of Laurence’s talks about variable fonts
- TYPO Labs 2017, Berlin (56 min)
- dotCSS 2017, Paris (20 min)
- TYPO Labs 2018, Berlin (42 min)
Support for variable fonts is improving all the time. This article reflects the state of support in January 2018. For frequent updates about the Axis-Praxis project and variable fonts in general, follow @axis_praxis on Twitter.
