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

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

A comparison of the word 'party' in print and digitally typeset.
Above, ink traps can be seen in the lower bowl of the ‘a’ and the arch connection of the ‘r’. Below, Spectral’s light traps. Production Type & Google Design

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:

The letters ABC, shown in wireframe glyphs that tilt at various angles to produce the illusion of 3D shapes.
An open source typeface inspired by storefront sign lettering. Tilt, by Andy Clymer

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

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


  1. Optical size, the hidden superpower of variable fonts,” Pixel Ambacht, June 17, 2021. “Variable fonts in real life: how to use and love them,” Evil Martians blog, March 24, 2022. The most thorough and thought-provoking introduction to variable fonts that I’ve read is this extended essay from Type Network↩︎

  2. Nick Sherman, “Font Hinting and the Future of Responsive Typography,” A List Apart, February 22, 2013. ↩︎

  3. Spectral is one of several fonts I’ve seen referred to as “screen serifs”: typefaces that are designed to be read on screens rather than revivals of canonical print fonts. The sentence you are now reading (at least at the time of publication) is set in one of these screen serifs: Source Serif 4. ↩︎

  4. Robert Bringhurst, The Elements of Typographic Style. Fourth Edition (version 4.3), Twentieth Anniversary Edition. (Vancouver: Hartley & Marks, 2019), 192-94. ↩︎

  5. Kris Sowersby, writing about the design of his screen serif Signifier, also touches on responsive typography as writing with light:

    A craft history with five centuries of physical output replaced by virtual output takes some reconciling. We have retained our sense of line, spacing and form. We have lost the physical, material touch, as Ruskin once railed against. What we have gained is speed, flexibility and reach. Raymond Gid elegantly expresses the transition when he wrote, “Letter, you are to be married to Light. That is the wedding that we shall celebrate to-morrow”.

    Signifier design information,” Klim Type Foundry blog, August 26, 2020. Citing Raymond Gid, “Célébration de la Lettre”, (1962). ↩︎