Variable fonts, a new kind of font for flexible design
Just minutes ago, at the ATypI conference in Warsaw, the world was introduced to a new kind of font: a variable font. Jointly developed by Apple, Google, Microsoft, and Adobe, a variable font is, as John Hudson put it, “a single font file that behaves like multiple fonts”. Imagine a single font file gaining an infinite flexibility of weight, width, and other attributes without also gaining file size — and imagine what this means for design.
Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.
A responsive lettering example, courtesy of Erik van Blokland. This shows one kind of flexibility that variable fonts will enable.
To facilitate just such advancements, people from our four companies (along with notable independent contributors) have been collaborating for more than half a year on a significant improvement to the OpenType font file specification that now includes a new technology: OpenType Font Variations, which allows type designers to interpolate a font’s entire glyph set or individual glyphs along up to 64,000 axes of variation (weight, width, etc.), and define specific positions in the design space as named instances (“Bold”, “Condensed”, etc.). Get a technical overview and a complete introduction by watching this video of the announcement at ATypI or reading our joint announcement on Medium, penned by John Hudson:
While earlier font interpolation technologies emerged from the font format wars of the early 1990s, and were developed and championed by individual, competing software companies, OpenType variable fonts are the product of a new collegiality aimed not only at defining a common standard but also interoperable implementations.
Variable fonts are real, but there’s work to do
Given this high-profile collaboration, it seems as if the whole world is moving in unison toward our future with variable fonts. But it’s going to take some time – and a lot of effort – before this new kind of font becomes something people can design with and readers can read.
We need fonts. Type designers need to make and offer variable fonts. To encourage this, our multi-company working group sweated every detail of the new OpenType specification, and built tools to help convert existing type families into variable font files. Our own David Lemon demonstrated this conversion as part of the variable fonts announcement at ATypI, and representatives from all four companies are at ATypI this week to talk with type designers.
Type designers, at least the ones I have spoken with, are all too ready for variable fonts. Adobe’s early efforts to define the multiple master font format may not have gained traction in the 1990s (it was way ahead of its time), but it certainly influenced type design tools and workflows. The hard part now will be licensing. Nobody knows yet how to handle the business aspects of variable fonts. But we’ve been there before, with web fonts. We’ll find a good solution.
We need rendering engines that can show the fonts. For fonts to actually show up anywhere, software behind the scenes called a rendering engine has to make typesetting and rasterization calculations. Rendering engines are incredibly complex. They also take a long time to develop and test. But people who work on rendering engines are in this working group, and collaborating. This is very promising.
We need browsers and design software to support the rendering engines. It’s great if variable fonts can technically be rendered, but it won’t matter unless our favorite software chooses to use the appropriate rendering engine. That can take quite a while — it took quite a while for web browsers to go from GDI to DirectWrite on Windows. But we got there! Look at it this way: our working group includes people whose companies make the Chrome, Safari, and Edge web browsers, as well as the world’s most popular design software.
We need ways for people to design with these new fonts. If we’re going to use them on the web, we need to define the appropriate properties and values as part of the CSS standard. Our working group has begun this effort, and you’ll be happy to know that Typekit’s own Bram Stein is involved.
And if design tools are going to help us make flexible typographic decisions, we’ll need to articulate those decisions and know how they relate to one another. Flexible design is complicated. I am personally working with the Typekit team, other teams at Adobe, our external integration partners, and you (yes, you!) to better understand that complexity so we can build appropriate tools.
And, we need you. Join us in raising a glass to today’s announcement, and our dedicated working group. Follow the discussion at TypeDrawers. We’ll certainly be talking more, as here at Typekit we work to help people make, find, get, and use variable fonts. If you have any questions for us, please ask. We would love to talk with you.
Update: As of September 23, this post has been translated into Japanese. Read the Japanese translation here.
42 Responses
Comments are closed.
This is fantastic. I don’t even know how many times I haven’t used a typeface because it didn’t have the weight I needed. Being able to adjust certain key elements of a typeface would be groundbreaking. I know at least two major browsers that auto-upgrade—maybe the adoption rate will be a little faster now.
Would these additional features be accessible via JavaScript? I’m reaching the limits of my technical knowledge here, but I was wondering if a polyfill could make these features available, in the event that browsers support them before CSS does.
CSS already supports weight and width declarations, which will be the two most common variation axes (as we know from previous generations of MM and GX fonts doing the same things). More needs to be done, but we saw a demo of using CSS weight and width to get at font variations in shipping Chrome and Edge browsers on the latest Windows 10, today. I *think* that was shipping browser versions, but even if not, the CSS part used existing CSS.
CSS will need to be extended to get at the full range of potential values, it’s a bit too much piecewise now. And it will need a way to get at arbitrary axes, too.
This is just super cool. I know OTFV isn’t ready yet, but it certainly seems it’ll be *very* useful and convenient when it is. Nice job, folks!
Since the days of Incubator Pro and its single-master interpolation capabilities in the early 90s I have wished for modern software that could do the same — and now it is here! Many thanks to all the people and companies involved in upgrading our tools.
As the Marquis de Sade once said, “Those who define are the masters.” Sounds promising unless this turns out to be a landgrab by Adobe. Where’s Quark in all this, for example? Not invited to the party?
Quark is not part of any font technology group; they are an implementer. Adobe is there because they are and always have been part of font technology. Adobe also happens to be in another group that Quark is in, at the application implementation level. It really is that simple; Quark is not being ignored.
A marvelous idea—to which I’d suggest a feature I didn’t see mentioned, although it may be in the specs.
Make these font variations easily shareable. Not all of us are font wizards. We’d love to be able to benefit from the talents of the more gifted. It’d be great to not only pick one of these variable fonts, but to have sets of expertly done tweaks to select from. Their very complexity and power means many of us will find them overwhelming and intimidating. What we don’t understand, we may not use.
Creating sharable variations would also make it easier to to add these new fonts to applications such as InDesign. Users would choose a variable font and then a named set of adjustments for it.
Your last sentence is the key and from what I’ve been reading I think that is the way it works. If all users have the base font then instances can be shared.
Variable Fonts allow for the type designer to select the pre-defined “instances” of the variable font, that would work like a traditional (if possibly large) font family. So the average user sees those instances and can use them. More advanced users can dial in their own preferred styles from anywhere in the range allowed by the font.
i like the carl dair’s typographic quest #1 used at the top of the page. i fondly remember adobe MM fonts and look forward to creating and using variable fonts.
format invented by people who don’t understand type design….
How is the format not understanding type design?
On the contrary, the format was invented by people with a *very* deep understanding of type design, as well as font technology. If you watch the video of the announcement you will get many glimpses of the depth of that understanding, with things like glyph morphology changes with changing weight.
Most sophisticated, large type families today are designed using this technology under the hood, and then because of the limitations of current font formats, are “flattened” into a bunch of predefined styles because that’s all that operating systems could support. Do you think that typefaces like Minion and Myriad, and the offerings of Font Bureau, Hoefler & Co, Frere-Jones and Commercial Type are unsophisticated?
Do you have MMF of CJK? If you have it, I want to see it. Thanks!
The next big step after this will be to have two or three of these variable fonts installed on every system. This will give the designers the freedom to have a unique look to the typography on their site without the user having to download a sibgle font along with the site.
Hi Thomas, Does the OpenType Version 1.8 have CJK fonts and see the samples? If you know it, please let me know it. Thanks for your time.
Is it not similar to Hz micro-typographic extensions that The-Thanh Han introduced in pdfTeX almost a decade ago? Hz extension provides a feature to dynamically thicken or thin glyphs at microlevel during runtime. This provides the user the ability to save lines nicely from unwanted hyphenations, looseness and tightness without compromising typographically.
https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjA6o_hp5HPAhUU_GMKHRdwAMEQFggfMAA&url=https%3A%2F%2Ftug.org%2FTUGboat%2Ftb25-1%2Fthanh.pdf&usg=AFQjCNHw9_ULqBPAFHfx3oJ4AiaRH3gKsA&sig2=2hwGltyNrzoRLjehKz7djA
Do you plan on making the engine and process entirely opensource?
Yes, there’s already some open-source code. Adobe has contributed changes to the FreeType rasterizer. Currently they’re in a separate branch called “OpenType-1.8”, but this will flow into the master branch. Likewise, there’s a branch of the HarfBuzz shaping library with the needed changes; again, they’ll get integrated into the mainline. Here’s a demo app that pulls all of this together: https://github.com/googlei18n/fontview
This is indeed exciting. As mentioned in the article, looks like a new riff on the multiple master format. Sad that never gained traction in the 1990s, but the use case is even more compelling for fluid Web designs, not to mention helping give a more consistent experience in mobile app design across multiple device formats.
I’m glad Multiple Master fonts was mentioned, as this is remarkably similar to that technology from the mid-90s. But I am worried that many of the same reasons that MM failed (as well as the Panose numbering system) will play out again in this century, including:
a) too much choice can cause more frustration rather than less;
b) it’s hard to create consistency throughout a publication;
c) it’s very difficult to spec the type (“no, I told you to use Helvetica 105cba7, not Helvetica 105a9e!”)
d) it’s hard to create a good UI, so only the hard-core font geeks get around to using it
e) it’s hard to convince software companies to include a technology that only font-lovers see the value of (look how long it has taken for even some basic OpenType formatting to catch on)
f) it’s hard to design these fonts, so there end up not being very many of them.
I’m very excited to read about this reintroduction of what is essentially MM fonts, because I LOVED that technology. But it’s hard to think about without feeling a little sting of remembered pain from MM’s death two decades ago.
Although almost all your concerns are reasonable, a number of other issues that I saw as the biggest problems for both MM and GX Variations look to be resolved this time around: support across operating systems and apps, for one. Also, the many dozens of families designed using these technologies can now be released with this enhanced flexibility.
I also note that predefined instances can use nice friendly names, and the infrastructure is being put in place so that custom instances will still not be as cryptically named as MM instances were.
with all due respect:
Apple has done a great job of foreseeing these problems with the San Fransisco typeface.
With that being said, Frutiger’s idea of numbering weights etc. still seem prophetic 🙂
This is VERY exciting—I too loved the flexibility of MM fonts, and mourned their passing. The involvement of all the ‘big boys’ in the development of Variable Fonts and their clear usefulness in the world of screen typography makes me hopeful that Variable Fonts will thrive.
Try this : https://www.prototypo.io/ . Really cool!
Thank you Bust!
Here the demo we showed at ATypI 2016 during our talk: https://lab.prototypo.io/smartFont
(Chrome and Firefox only)
The technology is very cool; but I’ll be interested to see how it affects prices. Font foundries make good money by selling font variations a la carte, which is usually more expensive than just buying the entire font family. But this technology would seem to eliminate that pricing model, since the technology essentially packs all possible variations for a font into a single file–no more selling variations a la carte.
Will we have to pay the full “font family” price for each “variable font” regardless of how many variations of that font we actually need?
I can imagine the OTFV file being sold as an inexpensive “family bundle” as Thomas mentions, but then foundries can still make instances of specific nodes on the axes and sell them as stand alone OTFs, as is currently done. Best of both worlds. Then after OTFV catches on a bit more, the sales will end and this more powerful, versatile format will be the premium priced option, with the static instances remaining as lower price options.
Pricing is up to each foundry, but it seems likely that foundries will price these new fonts a bit less than a full family of single fonts to encourage purchasing the all-in-one variable fonts.
With new releases this would be a “safe” option if there is no way to buy separate single-master fonts for the same family. People would only be able to buy the whole family, but it will be a bit cheaper.
That’s just me speculation, of course. Each foundry will do as they think best, and the optimal pricing might be different depending on whether the separate single-master fonts are also available for the same family.
Something else that would be great would be a lot more control over how underlined text is shown on the web. We need some CSS rules for controlling the thickness and space for underlined text. The current controls are very limited.
How is this different from good old MetaFont by Donald Knuth?
I looks as if the general idea is the same, but as far as I remember MetaFont, it was mostly concerned with size changes and creating the best possible rendering for a given size and type of printing technology to be used.
MetaFont describes the entire font in terms of mathematical operations. This is still a traditional drawn outline of a font, it’s just modified using mathematical operations.
If this font standard prevails, then everyone with the know-how to design a custom font will be in direct competition with every other font designer, until their products are only slightly distinguished from one another.. The intense competition between near-identical fonts will limit profits in the font-designing business to the short run — i.e., weeks or months until competitors can react, after a new font proves popular with users.
Once profits have been competed away, the next opportunity for a font engineer will be to develop an app that gives direct control of font features to users themselves. After that, the next iteration might be an AI assistant that suggests fonts and font modifications to suit the intended objectives of the user: to persuade the expected reader. .
By the way, my “Synesthesia” font assigns colors to dominant consonants in subject nouns and object nouns. Fonts for verbs have slightly more weight/thickness.
Metafont did this decades ago. Don Knuth had a demo where a text from the bible was incrementally transformed letter by letter from a sans serif font to a very different serif font, with smooth transition throughout that was almost imperceptible, all just slowly turning the knobs on the font. It was very impressive. He did loads of work to make all this happen.
Unfortunately, it turned out that it required insane amounts of understanding and discipline on the part of font designers to make this work well. It died on the vine for that reason.
This is just super cool. Nice job, folks!
The “Pinyin Font” design has shown one application of utilizing the variable font concept with multiple weights, which is used in a new book that was published in June 2016.
Unfortunately, there is no way to post pictures here to show some English Pinyin Font samples, which were created to celebrate Professor Knuth’s “Thirty Two Years of Metafont” talk occurred two days ago.
For folks interested in seeing this “variable fonts” implementation and production of the world’s first “Pinyin Font” design, please visit https://www.facebook.com/photo.php?fbid=1645078299155390&set=p.1645078299155390&type=3&theater.
I’d love to see all these players come up with a recommended (and free) set of pre-installed fonts for OS’s and/or browsers, therefore greatly expanding the list of system fonts available to web developers.
This is clearly the next big thing in typography and a massive step in web design for improving page load speeds. Font loading is such a bottle next and this will take us light years forward.
For folks who might be curious about a “variable fonts” OpenType implementation and production using the world’s first “Pinyin Font” design, please visit https://www.facebook.com/photo.php?fbid=1645078299155390&set=p.1645078299155390&type=3&theater.