The technical Aspects: Making and Displaying Variable Fonts
One novelty of variable fonts is the concerted effort of large tech companies at turning them real. Previously font wars were fought over formats. At TYPO Labs Peter Constable provided some insight on how things are progressing at Microsoft for Windows and the Edge browser. Dominik Röttsches informed us that Google’s Chrome browser now supports variable fonts on all platforms.
For the main browsers variable font support is moving from nightly builds to regular releases and the first Adobe CC applications also already support them. On the font production side things are also coming along: Georg Seifert and Rainer Erich Scheichelbauer showed off some new features of the Glyphs font editor that allow designers to create variable fonts, including universal axes, useful for things like moving crossbars across styles.
Behdad Esfahbod spoke about how the FontTools production library is progressing to handle all the variable font tables. As all of this is happening, Peter Constable also reminded us: “Rome wasn’t built in a day”. Currently for some of the technical implementations, such as substituting glyphs at a certain point on an axis, designers and technicians are still utilizing individual solutions. Things will likely gradually become more unified and standardized, including registered axes, Peter Constable gave an annual reminder to submit suggestions for these.
A reminder that the thorough implementation of specs is not a given came from Ulrike Rausch’s talk, that never mentioned variable fonts at all, but laid out in depth that still not all OpenType features are equally supported across applications.
Width and Weight
Assuming the technical support is there, what is it that variable fonts have to offer? In Gerry Leonidas’ words: “What can we do with this new toy?” Variation in width and weight have been established as a part of typeface design, especially for sans serifs, for decades – long before variable, or even digital fonts. Even the possibility of shifting weight and width seamlessly has been a reality with MultipleMaster and TrueType GX formats. Luc(as) de Groot pointed out in his talk that Fontographer 3.3.1 could already make variable fonts. It’s not a coincidence that variable fonts are often shown off in animations. (Including the TYPO Labs identity, a ”brilliant piece of branding“ according to Gerry Leonidas.) The seamless transition between styles is the only novelty here.
For width and weight Lu(cas) de Groot offered his answer to the question of how far we can go. His designs TheThinnest as well as TheFattest range from 1 unit to 2000 in stem width, respectively, probably the winner in this category. Hardly usable in the extremes, but work as a variable font. We can go to the extremes and everywhere in between, but do we have to? Is having a fluid transitions between a bold and a semibold really necessary?
Gerry Leonidas used his keynote for some perspective: type designers can get stuck in focussing on supply – the rabbit hole of what’s possible with the technology, while not focussing on the demand of those who create documents with type. Typography is about creating hierarchy, which doesn’t require the granularity and scope that designers will often offer in width and weight. He sees a lot of what type designers are doing as sunk cost, making styles that in most cases won’t be put to use. The file size savings of variable fonts on the other hand are a strong selling point for him, as reading is increasingly done on phones and high bandwidth coverage is still an issue in large parts of the world.
Variable Fonts for a Variable Web
The savings in file size in variable fonts is an benefit that also Bianca Berning and Laurence Penney brought up. It’s especially relevant for fonts with large character sets, for instance those in CJK. Even beyond size, variable fonts probably pack the most punch for applications on the web. While Gerry Leonidas argued document makers’ demand being for structure not unlimited styles, Jason Pamental, himself a document maker, bemoaned a web that was stuck in patterns and systems and generally lacks soul. When you’re designing for everything, you’re optimizing for nothing, he says. Both him and Laurence Penney spoke of the potentials of variable fonts on a web that itself is becoming more variable. Websites aren’t constrained to computer monitors anymore, but respond to the sizes of screens.
CSS has become more variable, with viewport units for instance. It’s helpful here that variable font axes like width and weight can already be tied in directly through CSS. A site that becomes narrower, might require a narrower font for better line length. No sliders needed, even though Firefox’s developer tools will soon offer a panel with sliders for accessing variable fonts. Beyond width and weight, optical size is an axis that some browsers already access automatically, enabling a more typographically refined web.
There are many examples of how this typographic refinement can be aided through variable fonts. A grade axis, with weight change independent of width is helpful for highlighting in UIs, where text positions must remain constant. Grades can also help compensate perceived differences in weight between light on dark and dark on light text. Bianca Berning, whose talk focussed on how meaningful typography is a vital aid communication, took this a step further. Grade values might also adapt dependent on ambient lighting or size dependent on the distance between screen and viewer. Jason Pamental, self described tinkerer, says ”the heart of the web is “figuring things out” and with variable fonts there are many solutions to be discovered. That might be readability solutions or just whimsy experiments, like those of Mandy Kerr, that he showcased. If the font allows it, like David Berlow’s often mentioned Amstelvar, it can even allow typesetting to a level of detail that involves accessing individual glyphs, to avoid collisions of ascenders and descenders for example.
Chances and Challenges
A proposal for a registered axis on an individual glyph level was presented by Sahar Afshar and José Solé. This “glyph extension axis” could prove to be particularly useful in Arabic typesetting, where glyphs can expand in justified text. It also works for other scripts though, for instance with swash characters in latin type. Currently in Arabic type these glyph extensions, or kashidas, are usually straight, a remnant of Arabic metal type. Variable fonts could bring arabic type closer towards it’s calligraphic origins, as was demonstrated in web-interface where certain characters could just be dragged to be extended. Sahar Afshar and José Solé also spoke about the difficulties in implementation though, getting the connections smooth and OpenType features breaking, which are essential for connecting glyphs in Arabic.
They weren’t the only ones speaking of issues with variable fonts. One issue stems in the fact that variable fonts work with deltas instead of masters. These can be added on top of each other, so not every corner of the design space needs to be designed. In a font with width and weight axis, all of the weight might be added to the narrowest design if there is no master to prevent this, resulting in garbled letterforms. This is especially true for designs with many axes, like Decovar, for which Laurence Penney pointed out, much of incredibly vast design space is unusable. What might Adrian Frutiger have done with Univers, he asked. One drastic solution might be locking these areas by swapping out characters with “Tofu”. Luc(as) de Groot, encountering a similar problem considers duplicating masters, a solution that also doesn’t seem ideal.
While that issue is technical in nature, Luc(as) de Groot also showed an example of a stencil K, where it’s the geometry of the letterform that makes intermediates on the width axis end up looking wonky. Not everything is ready for variable fonts. John Hudson described how he and his team are now drawing “variable first”, to keep shapes not only technically, but proportionally compatible.
Another issue with that several speakers touched upon repeatedly was that of meta-axes, axes to control axes of a variable font, that might prove helpful, but are not part of the font specification. Marianna Paszkowska and Bob Taylor showed the possibility of making a grade axis, for instance, from a width and weight axis by calculations on a higher level in JavaScript as one possible solution.
What does the Future hold?
What’s possible and what isn’t was also the theme for Underware’s talk. Last year Akiem Helmling and Bas Jacobs took an experimental look at the possibilities of variable fonts, like moving their entire library into one font. This year they took it a step further thinking about how to make variable fonts do what they aren’t meant to. Moving points on a curved path, for example, which can be useful for rotating outlines. Not really possible in the current specification, but achievable with higher order interpolation, using additional variable font axes. Less complicated, slightly more esoteric is their solution for what they wanted an inline version of their typeface Duos to do, but couldn’t with current variable font technology: It’s described in a text that’s embedded in the font for future revivals to implement when the font technology allows it.
Equally innovative examples, but within the restraints of what variable fonts can do already came from UMPRUM in Prague. Students made 12 Fonts with 152 Masters in only 48 days, all of them variable, all of them exploring a different possibility of variation. Apart from width and weight other axes include stencil gaps, corner rounding, ornamentation or ink traps. All shown off in some audience capturing animations. For inspiration on design solutions making full use variable fonts, this is the talk to watch. Another example of students producing interesting ideas for variable fonts came from Verena Gerlach and Maciej Połczyński, whose shorter workshop with students not as versed in type design from the Polish-Japanese Academy of Information Technology in Warsaw, resulted in some interesting animations inspired by the architecture of Warsaw.
With the lack of animation tools supporting variable fonts, the UMPRUM animations were also rendered in a browser, looping back to the theme that the web is currently furthest with its embrace of variable fonts. A notion also supported by the meeting of the CSS Working Group, that was hosted by TYPO Labs. Jürgen Siebert from Monotype announced at the end of the conference that there will be more web themed talks, heeding the call of Laurence Penney, but also Gerry Leonidas to look beyond the type design bubble. So until next year, keep your eyes on the web and your browsers updated.
– –
Stay informed and subscribe to the TYPO Labs Newsletter here.
