Writing with Light in Variable Fonts

typography

Typography, an art form devised for the static page, is a nightmare on the internet. Type consists of precisely defined elements — size, leading, measure, line breaks — that are subject to infinite variation depending on the reader’s device, browser, and screen orientation. But over the past few years, variable fonts have generated excitement by enabling the granular calibration of those elements on dynamic pages.

A lot has already been written about the benefits of variable fonts for responsive typography: softer contrasts in dark mode, cleaner transitions between font sizes (and screen ratios) with the optical axis, a single font file rather than one for each weight, &c.¹ Many of these techniques are inspired by print typography:

The idea of modifying a typeface’s letterforms for different situations is nothing new. As far back as Gutenberg, each size of a letterpress typeface has traditionally featured “optical size” variations that altered the spacing, proportions, weight, and other details for optimal results.²

Still others grapple with the fact that readers today encounter texts on glowing devices rather than in print books. Screens emit light; paper absorbs it. While some print typefaces were designed with ink traps — little notches in the corner of a letterform that gives the ink room to seep into the paper — Spectral, by Production Type, contains “light traps.”³

What’s really exciting about variable fonts is all of the experimental possibilities: fonts that transform like mechatronic robots, fonts like sundials whose shadows change with the time of day, fonts that respond to the ambient light of the room in which you read them, wispy fonts that blow in the wind of your cursor, and wireframe fonts that mimic a third dimension:

Look closely at Decovar, below, and you just might be able to see the grass grow. (This one reminds me of early 2010s digital poetry by David Jhave Johnston. Amazing to think that the “aesthetic animism” that once required Adobe After Effects can now be achieved with web fonts.)

See the Pen Growing Grassy Text with Variable fonts. by Mandy Michael (@mandymichael) on CodePen.

It’s exciting to imagine the new forms of writing that might emerge from all these new circuits for tailoring a writer’s words to the many different situations in which a reader could encounter them. Robert Bringhurst, in a remarkable book that Hermann Zapf called “the typographer’s bible,” was none too charitable about the prospects for screen-based typography:

The underlying problem is that the screen mimics the sky instead of the earth. It bombards the eye with light instead of waiting to repay the gift of vision — like the petals of a flower, or the face of a thinking animal, or a well-made typographic page. And we read the screen the way we read the sky: in quick sweeps, guessing at the weather from the changing shapes of clouds, or in magnified small bits, like astronomers studying details. We look to it for clues and revelations more than wisdom. This makes it an attractive place for the open storage of pulverized information — names, dates, or library call numbers, for instance — but not so good a place for thoughtful text.⁴

As someone who engages best with ideas in books — and “pulverized information” about books on screens — it’s hard to argue with this. But the more typographers and writers embrace the materiality of writing with light, the more ideas will emerge that express the shape of this emerging medium.⁵ I keep returning to the etymology of photography — light writing — and the primordial experiments that produced early cinema. It’s no accident that Laurence Penny drew on Edweard Muybridge’s chronophotography when he created a variable font of the same name: the font contains a single glyph for the horse emoji and a variable axis for successive “frames.” (Tap or hover over the glyph below for slow-mo.)

🐎

Now that we can drop a little animation 🐎 right in the middle of a sentence, what comes next?