1.
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:

2.
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.

3.
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.

4.
(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.

5.
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.

6.
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.

7.
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.

8.
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.

9.
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.

10.
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

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 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)

13.
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.

14.
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?

15.
For better fonts.
hjp://www.fontlab.com/
@FontLab · hjp://blog.fontlab.com · thomas@fontlab.com
@ThomasPhinney · hjp://www.thomasphinney.com