Variable Fonts
What just happened?
23 September 2016 ·
Thomas Phinney · fontlab.com · @FontLab ·
thomasphinney.com · @ThomasPhinney ·
Hi, I’m Thomas Phinney.
My story in brief is, I’m a font geek. My background:
Adobe (product manager for fonts & global typography) … Extensis (PM
for web fonts and font mgmt) … FontLab (President)
By way of background, let me briefly mention what has happened over
the last couple of years with color fonts: several different vendors
thought we needed a way of doing multi-color fonts for things like
emoji.
So we got four different solutions.
All four of them are in the latest OpenType spec. Adoption just may not
have been the fastest, although the latest version of Windows 10
supports all four formats.
I don’t think this background is entirely coincidental to last week’s
announcement:
photo by
Thomas Phinney
Obviously this was not a good outcome. So, since last January, a quiet
cabal of font geeks and engineers, first from the four companies began
meeting and plotting the next big thing.
photo by
Thomas Phinney
These are photos I took at the next-to-last meeting, which took place
during TypeCon in Seattle last month.
Behdad Esfahbod
GOOGLE
Peter Constable
MICROSOFT
Ned Hadley
APPLE
David Lemon
ADOBE
photo by
Alessia Mazzarella
Here is the Q&A from the announcement, with the speakers all hanging
out as friendly colleagues. Which, by the way, is how they acted in the
behind the scenes meetings leading up to the announcement. Just a
bunch of font geeks and engineers working together.
No more fragmentation. Now, I need to help you understand this: in the
font world, we’d never had a major new development involving more
than two big companies.

Pretty amazing stuff to me. On a hunch, I checked the weather for that
day.
(OT Font Variations)
Variable Fonts
OK, so that was interesting. What is this all about, anyway?
The formal label for the tech is OpenType font variations, or variable
fonts for short. Variable fonts are essentially an updating of Apple’s GX
Variations tech from the early 90s, which is functionally a superset of
Adobe’s multiple master technology of the same vintage.
Two Key Things
Compression for the whole family (70%?)
Design axes (hence the “variable” / “variaYons”)
Design Axes
The idea is that you can have different font designs and interpolate or
blend between them to get a near-infinite range of gradations, called
“instances.”
Each area of variation is called an AXIS. A variable font may have just one
axis, or several. Weight and width are the most common axes.
From a design perspective, what’s exciting is that you can get not just
some small number of specific values, but any degree in between.
Design Space
2
Figure 1 A multiple master design matrix
is established by the design axes integrated
into the typeface. Shown here is Myriad’s
two-dimensional matrix comprised of weight
and width axes, and a small sampling of the
possible font variations that can be custom-
generated within it.
For furth er tech n ical in form ation , please refer to Adobe’s tech n ical n ote
#5015 Adobe Type 1 Font Format Supplement.
Definition of Terms
Defin ition s for several key term s used in th is docum en t are listed below.
For a com plete glossary of defin ition s, see Appen dix B.
Multiple master technology
An en h an cem en t of Type 1 fon t tech n ology in corporatin g on -dem an d
in terpolation in to a fon t program .
Multiple master typeface
A super-typeface—a very large fam ily of related styles with in a sin gle Type 1
fon t program . Each m ultiple m aster typeface con tain s all th e in form ation
n ecessary to gen erate h un dreds of style variation s as in dividual fon ts, or
instances.
NOTE: In this document, the term typeface is not interchangeable with fon t.
Extended
Condensed
Light BlackW eight
Width
The range of possible designs is called a “design space”
So with a single axis font, you can visualize the design space or range of
possible instances as a simple line.
For a two-axis font, it’s a flat space, perhaps a square.
With three axes you get a 3-d space such as a cube.
This is an attempt to visualize a 4-axis design space, which would make
a hypercube.
But there is no real limit, you can have as many axes as you want!
Well, OK, I think maybe there would be a 64K limit. But 64K should be
enough for anyone.
DEMO
OpenType History
1996: Format announced by Adobe & Microso^
1998: Dropped MulYple Master (was only OT-CFF)
2000: First significant numbers of fonts
by 2006: Replaced PS Type 1 for new fonts
Now in sync with open ISO standard, OFF
Here’s some OpenType history.
Basically it’s been at least a decade since most vendors started making
their new fonts primarily in OpenType.
I think the other key thing is that OpenType is now an open standard. Or
technically, there is an open font standard, the Open Font Format or
O.F.F., that OpenType is kept in sync with. So now many aspects of
OpenType development are done in public.
This doesn’t mean backroom discussions are unimportant, nor does it
stop vendors from going off and doing their own things privately—as
we’ve seen in the past couple of years, with four competing ways of
doing color fonts—all of which are now enshrined in the OpenType spec.
The latest version of Windows 10 actually supports all four. It’s kinda
cray-cray.
Multiple Master fonts
Adobe extension to PostScript Type 1 format (1991)
Special flavor of PS Type 1 font files (Mac & Win)
Allowed axis-based designs
Briefly allowed for OpenType CFF (only)
• Dropped from OpenType spec in 1998
Adobe converted old MM fonts to OT by 2002–03
Gradually deprecated and reduced support
Apple’s GX/AAT
GX Typography (1991)
Rebranded Apple Advanced Typography (OS X)
Smart font format (like OpenType)
• Smart fonts almost enYrely Apple system fonts
Offers opYonal axis-based fonts (like MM)
• Lijle tracYon / 3rd-party support
OpenType
Microso^ + Adobe (later open as Open Font Format)
Compare vs PostScript Type 1 & TrueType
Single-file, cross-pla6orm fonts
OpYonal more language support
OpYonal “smart font” features
• typographic
• language related
So, what is OpenType?
Okay, I’m going to go all old geezer on you for a minute.
You kids today have no freakin’ idea how easy you have it with fonts.
Back in the ’90s, Mac fonts only worked on a Mac, and Windows fonts only
worked on Windows. If they were PostScript fonts, you had two files to make up a
complete font, and had to remember to copy both of them and keep them
together. If you wanted extended language support in a PostScript font, you’d
have to switch fonts, because even eastern European accented characters, like
say Turkish, couldn’t fit in the same font file as Western European accented
characters… the PostScript fonts were limited to 256 encoded characters. There
were even different standard character sets for Mac fonts and Windows fonts, so
moving documents across plaoorms was especially dangerous.
Oh, and did I menYon that you had to install a system extension to even get your
operaYng system to scale the PostScript fonts on screen?
It was crazy.
OpenType took us away from all that.
Variable Fonts
Single file for a family (two for upright plus italic)
Base font style plus other master designs
“Deltas” to specify the other masters compactly
Can switch glyphs in design space
So, back to our topic of the day, variable fonts. These now use a single
file for a family of fonts, or two files if the family includes italic styles.
Each variable font involves two or more master designs. Now, just to be
clear, those master designs don’t have to be in the corners of the design
space. There just has to be one master somewhere on each side.
Besides advanced typographic superfamilies, variable fonts are simply a
lot smaller. We will have to get further down the implementation road to
know just how much smaller, and it will vary wildly by family and
depending on how many fonts you would have otherwise installed
separately. But as a totally ballpark figure, 70% is what the allies are
using.
What do we see?
Non-savvy environment?
• single default style? (.p)
• nothing? (.oo)
Savvy OS + regular app: default instances
Savvy OS + savvy app, or savvy browser:
• arbitrary instances
• UI? sliders or other access method
CSS 3
Can map some CSS features to VF axes
Weight: 9 values (100–900)
Width: 9 values (1–9)
CSS 4
Access full range of variable font values?
Support standard pre-named axes + arbitrary axes?
Will variable fonts
succeed?
So, will variable fonts succeed?
Yes, I think they will. Back in the early 90s there were more pressing
problems of language support that hadn’t been solved yet. That was
more pressing. Moreover, both GX and MM were backed primarily by just
one company, Apple and Adobe respectively. One tech was Mac-only,
and the other had no system-level support and almost no app support.
Now we have the relaunch of some old ideas, carefully integrated with
the existing OpenType standard. It’s been done by a consortium of major
players. Microsoft, Apple and Google represent all the major operating
systems. Adobe, Microsoft and Apple represent the biggest sources of
apps—and you could add Google on the mobile side. Google, Microsoft
and Apple give you an overwhelming majority of web browser share,
both mobile and desktop. It’s simply a matter of critical mass of support.
Part of this is motivation as well. I’ve already mentioned how 20 years
ago there were more pressing issues, that have been solved.
Articles/Resources
Introducing OpenType Variable Fonts

by John Hudson
Variable fonts, a new kind of font for flexible design 

by Tim Brown, Adobe
Introducing OpenType font variaHons 

by Behdad Esfahbod & Sascha Brawer, Google
Lesson of color fonts for variable fonts 

by Thomas Phinney
OpenType 1.8 specificaHon
FontLab announces support for variable fonts
Questions?
For better fonts.
hjp://www.fontlab.com/
@FontLab · hjp://blog.fontlab.com · thomas@fontlab.com
@ThomasPhinney · hjp://www.thomasphinney.com

Thomas Phinney, “Fonts. Everything is Changing. Again.”

  • 1.
    Variable Fonts What justhappened? 23 September 2016 · Thomas Phinney · fontlab.com · @FontLab · thomasphinney.com · @ThomasPhinney · Hi, I’m Thomas Phinney. My story in brief is, I’m a font geek. My background: Adobe (product manager for fonts & global typography) … Extensis (PM for web fonts and font mgmt) … FontLab (President) By way of background, let me briefly mention what has happened over the last couple of years with color fonts: several different vendors thought we needed a way of doing multi-color fonts for things like emoji. So we got four different solutions. All four of them are in the latest OpenType spec. Adoption just may not have been the fastest, although the latest version of Windows 10 supports all four formats. I don’t think this background is entirely coincidental to last week’s announcement:
  • 2.
    photo by Thomas Phinney Obviouslythis was not a good outcome. So, since last January, a quiet cabal of font geeks and engineers, first from the four companies began meeting and plotting the next big thing. photo by Thomas Phinney These are photos I took at the next-to-last meeting, which took place during TypeCon in Seattle last month.
  • 3.
    Behdad Esfahbod GOOGLE Peter Constable MICROSOFT NedHadley APPLE David Lemon ADOBE photo by Alessia Mazzarella Here is the Q&A from the announcement, with the speakers all hanging out as friendly colleagues. Which, by the way, is how they acted in the behind the scenes meetings leading up to the announcement. Just a bunch of font geeks and engineers working together. No more fragmentation. Now, I need to help you understand this: in the font world, we’d never had a major new development involving more than two big companies.
 Pretty amazing stuff to me. On a hunch, I checked the weather for that day.
  • 4.
    (OT Font Variations) VariableFonts OK, so that was interesting. What is this all about, anyway? The formal label for the tech is OpenType font variations, or variable fonts for short. Variable fonts are essentially an updating of Apple’s GX Variations tech from the early 90s, which is functionally a superset of Adobe’s multiple master technology of the same vintage.
  • 5.
    Two Key Things Compressionfor the whole family (70%?) Design axes (hence the “variable” / “variaYons”) Design Axes The idea is that you can have different font designs and interpolate or blend between them to get a near-infinite range of gradations, called “instances.” Each area of variation is called an AXIS. A variable font may have just one axis, or several. Weight and width are the most common axes. From a design perspective, what’s exciting is that you can get not just some small number of specific values, but any degree in between.
  • 6.
    Design Space 2 Figure 1A multiple master design matrix is established by the design axes integrated into the typeface. Shown here is Myriad’s two-dimensional matrix comprised of weight and width axes, and a small sampling of the possible font variations that can be custom- generated within it. For furth er tech n ical in form ation , please refer to Adobe’s tech n ical n ote #5015 Adobe Type 1 Font Format Supplement. Definition of Terms Defin ition s for several key term s used in th is docum en t are listed below. For a com plete glossary of defin ition s, see Appen dix B. Multiple master technology An en h an cem en t of Type 1 fon t tech n ology in corporatin g on -dem an d in terpolation in to a fon t program . Multiple master typeface A super-typeface—a very large fam ily of related styles with in a sin gle Type 1 fon t program . Each m ultiple m aster typeface con tain s all th e in form ation n ecessary to gen erate h un dreds of style variation s as in dividual fon ts, or instances. NOTE: In this document, the term typeface is not interchangeable with fon t. Extended Condensed Light BlackW eight Width The range of possible designs is called a “design space” So with a single axis font, you can visualize the design space or range of possible instances as a simple line.
  • 7.
    For a two-axisfont, it’s a flat space, perhaps a square. With three axes you get a 3-d space such as a cube.
  • 8.
    This is anattempt to visualize a 4-axis design space, which would make a hypercube. But there is no real limit, you can have as many axes as you want! Well, OK, I think maybe there would be a 64K limit. But 64K should be enough for anyone.
  • 9.
    DEMO OpenType History 1996: Formatannounced by Adobe & Microso^ 1998: Dropped MulYple Master (was only OT-CFF) 2000: First significant numbers of fonts by 2006: Replaced PS Type 1 for new fonts Now in sync with open ISO standard, OFF Here’s some OpenType history. Basically it’s been at least a decade since most vendors started making their new fonts primarily in OpenType. I think the other key thing is that OpenType is now an open standard. Or technically, there is an open font standard, the Open Font Format or O.F.F., that OpenType is kept in sync with. So now many aspects of OpenType development are done in public. This doesn’t mean backroom discussions are unimportant, nor does it stop vendors from going off and doing their own things privately—as we’ve seen in the past couple of years, with four competing ways of doing color fonts—all of which are now enshrined in the OpenType spec. The latest version of Windows 10 actually supports all four. It’s kinda cray-cray.
  • 10.
    Multiple Master fonts Adobeextension to PostScript Type 1 format (1991) Special flavor of PS Type 1 font files (Mac & Win) Allowed axis-based designs Briefly allowed for OpenType CFF (only) • Dropped from OpenType spec in 1998 Adobe converted old MM fonts to OT by 2002–03 Gradually deprecated and reduced support Apple’s GX/AAT GX Typography (1991) Rebranded Apple Advanced Typography (OS X) Smart font format (like OpenType) • Smart fonts almost enYrely Apple system fonts Offers opYonal axis-based fonts (like MM) • Lijle tracYon / 3rd-party support
  • 11.
    OpenType Microso^ + Adobe(later open as Open Font Format) Compare vs PostScript Type 1 & TrueType Single-file, cross-pla6orm fonts OpYonal more language support OpYonal “smart font” features • typographic • language related So, what is OpenType? Okay, I’m going to go all old geezer on you for a minute. You kids today have no freakin’ idea how easy you have it with fonts. Back in the ’90s, Mac fonts only worked on a Mac, and Windows fonts only worked on Windows. If they were PostScript fonts, you had two files to make up a complete font, and had to remember to copy both of them and keep them together. If you wanted extended language support in a PostScript font, you’d have to switch fonts, because even eastern European accented characters, like say Turkish, couldn’t fit in the same font file as Western European accented characters… the PostScript fonts were limited to 256 encoded characters. There were even different standard character sets for Mac fonts and Windows fonts, so moving documents across plaoorms was especially dangerous. Oh, and did I menYon that you had to install a system extension to even get your operaYng system to scale the PostScript fonts on screen? It was crazy. OpenType took us away from all that. Variable Fonts Single file for a family (two for upright plus italic) Base font style plus other master designs “Deltas” to specify the other masters compactly Can switch glyphs in design space So, back to our topic of the day, variable fonts. These now use a single file for a family of fonts, or two files if the family includes italic styles. Each variable font involves two or more master designs. Now, just to be clear, those master designs don’t have to be in the corners of the design space. There just has to be one master somewhere on each side. Besides advanced typographic superfamilies, variable fonts are simply a lot smaller. We will have to get further down the implementation road to know just how much smaller, and it will vary wildly by family and depending on how many fonts you would have otherwise installed separately. But as a totally ballpark figure, 70% is what the allies are using.
  • 12.
    What do wesee? Non-savvy environment? • single default style? (.p) • nothing? (.oo) Savvy OS + regular app: default instances Savvy OS + savvy app, or savvy browser: • arbitrary instances • UI? sliders or other access method CSS 3 Can map some CSS features to VF axes Weight: 9 values (100–900) Width: 9 values (1–9)
  • 13.
    CSS 4 Access fullrange of variable font values? Support standard pre-named axes + arbitrary axes? Will variable fonts succeed? So, will variable fonts succeed? Yes, I think they will. Back in the early 90s there were more pressing problems of language support that hadn’t been solved yet. That was more pressing. Moreover, both GX and MM were backed primarily by just one company, Apple and Adobe respectively. One tech was Mac-only, and the other had no system-level support and almost no app support. Now we have the relaunch of some old ideas, carefully integrated with the existing OpenType standard. It’s been done by a consortium of major players. Microsoft, Apple and Google represent all the major operating systems. Adobe, Microsoft and Apple represent the biggest sources of apps—and you could add Google on the mobile side. Google, Microsoft and Apple give you an overwhelming majority of web browser share, both mobile and desktop. It’s simply a matter of critical mass of support. Part of this is motivation as well. I’ve already mentioned how 20 years ago there were more pressing issues, that have been solved.
  • 14.
    Articles/Resources Introducing OpenType VariableFonts
 by John Hudson Variable fonts, a new kind of font for flexible design 
 by Tim Brown, Adobe Introducing OpenType font variaHons 
 by Behdad Esfahbod & Sascha Brawer, Google Lesson of color fonts for variable fonts 
 by Thomas Phinney OpenType 1.8 specificaHon FontLab announces support for variable fonts Questions?
  • 15.
    For better fonts. hjp://www.fontlab.com/ @FontLab· hjp://blog.fontlab.com · thomas@fontlab.com @ThomasPhinney · hjp://www.thomasphinney.com