Typeface as Interface

The possibilities of typographic expression with variable fonts

Web Typography Workshop @ Letterform Archive
Week 4

Typographic Flexibility

Variable fonts offer new ways to expand and refine typography.

Device flexibility, navigation menu for Occupant Fonts Site
A customizable e-reader with variable weight axis Site
Harmonizing with other scripts and fonts
Sample uses of Start Script for Panera, by Victoria Rushton
A variable “underline” glyph for pairing, with 2 stylistic alternates
An optical size axis for various media
Refined microinteractions, microsite for Stephen Nixon’s Recursive Site
Grades and optical sizing Site
Custom axes for Chee Variable by Ohno Type, James Edmonson Source
Custom stencil font for Rhode Island School of Design, by Ryan Bugden Source
SF Symphony Branding, by COLLINSSource

A Live Interface

Variable font formats provide not necessarily a new way to select a font style—a slider replacing a dropdown menu.

Rather, it is the ability to programmatically specify a precise point in a font’s design space.

The materials of letters

  • Ink
  • Metal
  • Wood
  • Photo
  • Pixels
  • Vectors

The tools for letters

  • Ink: Pen
  • Metal: Punch-cut metal type
  • Wood: Woodblock letters
  • Photo: Phototypesetting machine
  • Pixels: Digital screen
  • Vectors: Digital programs

More on the The relationship between tools and letters.

Data as input material—variation as response

FF Beowulf by Letterror (Just van Rossum and Erik van Blokland,) 1990 Source
Announcement for a panel on the typeface Twin, Designed By Letterror, 2002

Variation as a function of any input

Type Phase, by Elias Hanzer Site
Goertek, a custom font for a sound company, Kontrapunkt Source
Kachi Buwa Variable Font, by Emi Takahashi Site
Wind Variable by Hansje van Halem Source
Climate Crisis Font, by Helsingin Sanomat Site
Radio Amnion, for Jol Thoms, with Minkyoung Kim Site
A moonphase variable font
Seasons in Pentameter by Laurel Schwulst Site
Trekker/Browser by Tiger Dingsun Site
Student Work from the class Web Type Site
Choreo by Dan Luo Site

Variation as an active human interface

Occupant Fonts Variable Font Guide