thomas phinney, “fonts. everything is changing. again.”

15
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 dierent vendors thought we needed a way of doing multi-color fonts for things like emoji. So we got four dierent 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:

Upload: webvisions

Post on 27-Jan-2017

294 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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 nothave 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:

Page 2: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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.

Page 3: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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 morethan two big companies.Pretty amazing stuff to me. On a hunch, I checked the weather for that day.

Page 4: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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

Page 5: Thomas Phinney, “Fonts. Everything is Changing. Again.”

Two Key ThingsCompression for the whole family (70%?)

Design axes (hence the “variable” / “variaYons”)

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

Page 6: Thomas Phinney, “Fonts. Everything is Changing. Again.”

Design Space

2

Design in g Multiple Master Typefaces 12/ 19/ 97 15:13 in tro .rev.fram e, Left Master Page

Both parts of th is docum en t are writ ten prim arily for type design ers an dtypeface m an ufacturers, bu t m ay be usefu l for type design software developersan d type-supportin g application developers as well. Th e docum en t assum essom e fam iliarity with design in g Type 1 outlin e typefaces.

Figure 1 A m ultiple m aster design m atrixis established by the design axes integratedinto the typeface. Shown here is Myriad’s two-dim ensional m atrix com prised of weightand width axes, and a sm all sam pling of thepossible font variations that can be custom -generated within it.

For furth er tech n ical in form ation , p lease refer to Adobe’s tech n ical n ote#5015 Adobe Type 1 Font Form at Supplem ent.

Definition of TermsDefin ition s for several key term s used in th is docum en t are listed below.For a com plete glossary of defin it ion s, see Appen dix B.

Mult iple master technology

An en h an cem en t of Type 1 fon t tech n ology in corporatin g on -dem an din terpolation in to a fon t program .

Mult iple master typeface

A super-typeface—a very large fam ily of related styles with in a sin gle Type 1fon t program . Each m ultip le m aster typeface con tain s all th e in form ationn ecessary to gen erate h un dreds of style variat ion s as in dividual fon ts, orinstances.

NOTE: In this docum ent, the term typeface is not interchangeable with fon t .

Extended

Condensed

Light BlackWeight

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.

Page 7: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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.

Page 8: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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.

Page 9: Thomas Phinney, “Fonts. Everything is Changing. Again.”

DEMO

OpenType History1996: 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.

Page 10: Thomas Phinney, “Fonts. Everything is Changing. Again.”

Multiple Master fontsAdobe 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/AATGX 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

Page 11: Thomas Phinney, “Fonts. Everything is Changing. Again.”

OpenTypeMicroso^ + 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 FontsSingle 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.

Page 12: Thomas Phinney, “Fonts. Everything is Changing. Again.”

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 3Can map some CSS features to VF axes

Weight: 9 values (100–900) Width: 9 values (1–9)

Page 13: Thomas Phinney, “Fonts. Everything is Changing. Again.”

CSS 4Access 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.

Page 14: Thomas Phinney, “Fonts. Everything is Changing. Again.”

Articles/ResourcesIntroducing OpenType Variable Fontsby 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?

Page 15: Thomas Phinney, “Fonts. Everything is Changing. Again.”

For better fonts.

hjp://www.fontlab.com/

@FontLab · hjp://blog.fontlab.com · [email protected]

@ThomasPhinney · hjp://www.thomasphinney.com