Dirty variables workshop is about variable fonts with some distance and manual interpolation (with stroke fonts inside), with La Cambre master students in type media, Brussels, on the 26 + 27 March 2018.
We are using Fonttools and the ttx format, which is a clear xml dump of every table present in a (variable) font. See github.com/fonttools/fonttools.
The custom made inspector web tool displays the content of ttx files, including all deltas. The repository is on http://gitlab.constantvzw.org/osp/workshop.dirty-variables
All the documentation we gathered before and during the workshop follows, in a quite rough way!
Variables fonts past and present
OpenType Font Variations is the new feature of the OpenType Font Format specification version 1.8. The first public announcement of this new version happened in Warsaw during ATypI 2016.
To be a bit more clear on what and who :
OpenType format was developped by Microsoft, Apple and Adobe since 1996, to stop the war between Postscript (Adobe) and Truetype (Microsoft + Apple) formats. Because of their need for emoji fonts, Google join the group more recently. Apple and Microsoft share the same concern.
«The new OpenType format allows for a single file to contain an entire family, or multiple related families, of font instances. Previously if you wanted to license an entire font family with a range of weights for your website (like Light, Regular, Medium, Bold, Extra Bold, and Ultra) the type foundry would generate a separate font file for each style. But now it's possible for type foundries to put all of these styles into a single file.» — from cjtype.com/dunbar/variablefonts, an article on Dunbar “n”, a single glyph font 'n' as the "first" var font !
Variable fonts are also called “responsive typographies”.
For the moment, this font format is mostly working on the web. Compatble web browsers are listed on https://caniuse.com/#feat=variable-fonts
For the print world :
-
Colorfont support in Photoshop - link to find one day
Design spaces, axis, tables?
To dive into the variable fonts also brings us to revisit the different spaces and tables that are around and contained in a font.
In the mid-nineties, Adobe has proposed Multiple Masters fonts, an interpolation system to generate fonts from two masters embeded into the font itself. In the same time, Apple introduce a more refined but similar system called Apple Advanced Typography (AAT). Both system proves the technical feasability but were not largely used by designers. https://en.wikipedia.org/wiki/Multiple_master_fonts - https://en.wikipedia.org/wiki/Apple_Advanced_Typography
Designers have not catch up these tools, but type designers begon to use the same kind of tools, but externally of the font, in the font editors* mainly. The designation “design space” one of way to name it. This space gathers or deploys the informations describing the relations between the masters, the sources of a font. It defines for exemples the relations between the light and the bold version of a same font. A design space store all the datas needed for variable font interpolations. It it was is not into the font, meaning it is not about the drawing of the font, the meta infos...
We could say that now with Open Type 1.8 specification, this design space become more concretely embeded into the font and not depending on extrapolation tools. The design space is called variation space in the specification and it is the range of variability in the variable font.
The design space is defined by
-
axes (names and dimensions of the axes)
-
sources (links to the ufo, otf, ttf...)
-
instances (the steps you wants to generate)
-
rules (sketche on how conditional stuff could work)
And those element are tidy into tables :
-
glyph - Glyph shapes → table containing the shape data for the glyphs https://docs.microsoft.com/en-us/typography/opentype/spec/glyf
-
gvar -Glyph Variations→ table containg the delta's of the glyphs https://docs.microsoft.com/en-us/typography/opentype/spec/gvar
-
fvar - Font Variations → table desribing the variation axes of the font, and describing instances (pre-set values per axis) - https://docs.microsoft.com/en-us/typography/opentype/spec/fvar
-
avar - axis variations → table allowing to modify how a variation behaves, mainly the 'speed', it can become non-linear - https://docs.microsoft.com/en-us/typography/opentype/spec/avar
-
cvar - CVT (control value table) variations https://docs.microsoft.com/en-us/typography/opentype/spec/cvar
-
stat - style attributes → ? https://docs.microsoft.com/en-us/typography/opentype/spec/stat
Axis names have to be a string, that can't be longer than 4 letters. Axis tags are predefined axes. 'wght': weight, 'wdth': width, 'ital': italic, 'slnt': slant, 'opsz': optical size.
See a talk by Erik van Blokland at TYPO Labs 2017 about designspaces
More complete introductions
To ensure a good start of the technology (everyone was remembering the failed attempt of MM and AAT...), the four giants agreed to announce it in one go, along with external commenters
-
Introducing OpenType Variable Fonts, John Hudson (W3C), Sep 14, 2016
-
Apple annoucement (is there an Apple annoucement?)
-
From TrueType GX to Variable Fonts, Tom Rickner, Head of Tools at Monotype - 29. 11. 2016
-
Why Variable Fonts Will Succeed, Thomas Phinney (FontLab, ATypI) - 27. 01. 2018
-
OpenType variable fonts discussion on TypeDrawers - search for "[otvar]"
Documentation
-
The very clear Microsoft documentation of the OpenType® specification is on https://docs.microsoft.com/en-us/typography/opentype/spec/font-file#otttables
-
More general, a blog post with some details - https://simoncozens.github.io/fonts-and-layout/opentype.html#opentype-font-variations
-
And 99 articles from 1991 (!) to 2018 on https://www.axis-praxis.org/resources
(All-male) actors
Here are some profiles to follow that document and follow all the rebounds of the variables
-
Laurence Penney (Bristol, UK)
-
Nick Sherman (New York, USA) - At the occasion of Robothon 2018 (8–9 March), Nick launched https://v-fonts.com, a website collecting and displaying variables fonts. On twitter Nick is on https://twitter.com/NickSherman and https://twitter.com/variablefonts
-
Erik van Blokland from Letterror, part of the OpenType 1.8 comitee
-
Just Van Rossum from Letterror, (probably) the creator of ttx, neffew of Guido van Rossum, programmer who creates Python
-
Thomas Phinney, font and typography expert and consultant. In his day job, Thomas is President of FontLab, the font creation/editing software company. He is also treasurer of ATypI, the international typographic association. From 1997-2008 he did type at Adobe, lastly as product manager for fonts and global typography. After that he spent five years as senior technical product manager (a.k.a. “guru”) of fonts and typography at Extensis, including managing the font library for the WebINK web font solution. His typeface Hypatia Sans is an Adobe Original (with help from Robert Slimbach, Miguel Sousa and Paul Hunt). His latest typeface is the Kickstarter-funded Cristoforo.
-
John Hudson of Tiro Typeworks, design wonderful top-of-the-line fonts in Vancouver. Tiro is increasingly involved in font technologies, and are avid advertisers for OpenType and work often with Microsoft and Linotype on projects. John has created or collaborated on typefaces for many writing systems. He is an expert contributor to Unicode, and a member of the W3C Web Fonts Working Group.
-
Adam Twardoch and Yuri Yarmola : programmers of FontLab
-
Georg Seifert and Rainer Erich Scheichelbauer : programmers of Glyphs
(Yes, Twitter remains a good node for typographic discussions)
Some critical approaches
-
["Of course there are skeptics and believers. A very interesting statement from Indra Kupferschmid in her talk during this year’s Robothon (2018) was when she warned type designers of the sometimes boring results of this new technology. I’m one of the believers and in this article I’ll try to explain why" - Irene Vlachou] (https://www.type-together.com/index.php?action=portal/viewContent&cntId_content=3614)
Usage exemples
-
A variable font that responds to sound on goertek.kontrapunkt.com/online/
-
Web use collection of Mandy Michael codepen.io/collection/XqRLMb/#
-
Fake on website Dumbar studiodumbar.com and on github.com/RoelN/Color-Variable-Emoji
Toolkit
- Fonttools
- github.com/fonttools/fonttools
- groups.google.com/forum/#!forum/fonttools
-
On Mac, where every install is a bit more complicated, install Fonttools with brew on terminal
-
PyGObject
- pygobject.readthedocs.io/en/latest
-
To install it, you'll also need libgirepository1.0-dev and libcairo-dev
-
Fontforge
-
Non-free : Fontlab, Robofog, Robofont, and Glyphs.