Type Network

OpenType Font Variations

Contents

This page uses variable fonts!

To see this page in all of its variable glory, follow these instructions to download and configure a compatible browser.

Chrome (Mac and Windows)

  1. Download Chrome Canary.
  2. Go to the URL chrome://flags.
  3. Enable Experimental Web Platform Features.

Firefox (Mac)

  1. Download Firefox Developer Edition (recommended) or Firefox Nightly.
  2. Go to the URL about:config.
  3. Set layout.css.font-variations.enabled to true.
  4. Set gfx.downloadable_fonts.keep_variation_tables to true.
  5. Set gfx.downloadable_fonts.otl_validation to false.

Introduction

We’re excited to present the second installment of our publications related to variable fonts. The first installment, which told the stories of Amstelvar and Decovar, showed us beginning to work with variable fonts—imagining, designing, and producing them. Since then, code and browsers have evolved to support the new format, allowing us to start using variable fonts. Naturally, thinking and writing about variations in the context of history and the future can’t be far behind.

Variable fonts: historical context

Linotype matrices

Chapter i

When lines roamed the earth

Not much about letterpress may strike us as “virtual” today, but Gutenberg’s innovation of separating the formation of letters from the document they were formed on marked a step toward abstraction. Otmar Mergenthaler’s Linotype machine added a second layer of virtuality to type, especially text type, to serve the needs of a new kind of commercial immediacy demanded in the second half of the nineteenth century.

Postscript to-do list

Chapter ii

Typography, from feudalism to democracy

The transitional period between analog methods and Desktop PCs with PostScript is sometimes called the “Proprietary Age” of graphic design—the fonts were digital, but the equipment they were used on was still a mishmash of proprietary, mutually incompatible machines.

Font Matrix

Chapter iii

Jump in, the water’s warm

The advent of variable fonts means doing everything, or nothing, or something in between for font users and type designers. Superficially, everything that worked before still works now. All existing fonts retain their quality, functionality, and performance. Deep down, though, OpenType variations technology can change everything about type. To better understand this, it’s helpful to put this historic development into some perspective, looking both backward at how type technology has evolved and forward toward where the new tools may take us.

Opacity

Opacity Illustration

When digital outline fonts first started being developed, people weren’t quite sure whether the line being drawn was opaque or transparent. In analog type development, the punchcutter (and later the letter drawer, whose work drove punchcutting machinery) first created a transparent, or white, line around the opaque or black, and then cut away what would be white, leaving the punch ready to make impressions in softer metal (called matrices) into which lead could be poured to make printable letters.

Variable font: Amstelvar

Amstelvar Animation

After the announcement of OpenType variable fonts at ATypI Warsaw, Font Bureau took on an extreme font development challenge for Google: developing Amstelvar, a serifed display font that could demonstrate the possibilities inherent in OpenType font variations. Amstelvar’s design axes have the ability to adjust, with extreme granularity, the black-and-white spaces that encompass the features controlling weight, width, size, x-height, and serif shape.

Variable font: Decovar

Decovar Animation

At Google’s request, David Berlow developed Decovar, a multistyle decorative variable font, to show off how a single display font could change its appearance in dramatic ways within a single interpolation space. Decovar sports three variation axes for its underlying skeleton, and seven for its terminals, which together generate a mind-blowing amount of visual variety.