Letter / Form

Designing inter-active typography

For Bad Translation: Expanded Typography and Publication / MIT, Boston / March 4, 2024

Part 1: Seeing letterforms

… seeing really is forgetting the name of the thing you see. In this instance, you walk in and your brain tells you, oh, that’s a red, a yellow, and a blue plane—so that that’s what you see. You see “red,” and “yellow” and “blue,” and it takes a while for your perceptual apparatus to burn through all that initial cognitive/linguistic labeling.

Robert Irwin, from Seeing Is Forgetting the Name of the Thing One Sees, by Lawrence Weschler

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H

HOD

nop

Albrecht Dürer’s alphabet for Louis XIV source

Part 2: Shaping letters

An ancient Roman bronze tablet from after AD 48Source

Brush and Cchisel — Broad flat brushes defined the letters before they were carved, giving rise to “serifs” Source

@gen.ramirez Roman capital R#brushcalligraphy #calligraphy #romancapitals

1899 specimen from Hamlton Wood Type Source

Wooden type allowed much larger sizes to be printed Source

Wood Type Poster — With the impact of Wood type, posters proliferated for entertainment, advertising, political campaignsSource

Relationships of various scripts — Evolution of various Roman / Greek uncials Source

Comparison of ancient writing systems Source

Persian Cuneiform — Cuneiform c.3000 BCE—300CESource

Reed Stylus — Blunt end of a reed stylus into wet clay tablets Source

c.1600 BCE: Hieratic script on Papyrus Source

Ancient Chinese Script on Oracle Bones — c.1200 BCE: Oracle Bones Source

Seal script example — c. 221 BCE: Seal script style Source

c. 185 Han Dynasty Clerical Script Source

Types of calligraphic scripts — Types of Chinese calligraphic scripts Source

Brahmi Letter Shapes — Brahmi letter shapes Source

Palm trees — South Indian Palm Trees Source

Part 3: Typeface as Interface

Materials &

Ink
Metal
Wood
Photo
Pixels
Vectors

Tools

Pen
Punch-cut metal type
Woodblock letters
Phototypesetting
Digital screen
Digital programs

Rasterization Illustrations in the Apple Developer Manual

year	device	ppi
2023	iPhone 14	460
2023	Apple Watch	326
2021	Macbook Pro Retina	254
2019	Pro Display XDR	218
2012	Macbook	72

Animated Bezier Vectors, Wikimedia Commons

[Drawing vectors is like] getting a feeling for a piece of math. What you’re doing is basically creating instructions for a piece of software to draw a line. It’s almost like choreography. It may not feel that way, but at the bottom of it it really is, because it’s a function of time.

Jürg Lehni

H

We draw “masters” at the extremes if the designspace

H

→

H H H

←

H

We mathematically “interpolate” in-between instances

A variable font is a single font file contains many different variations of a typeface, instead of having a separate font file for every width, weight, or style. This format was developed in collaboration by Adobe, Apple, Google, and Microsoft.

H

Axis Tag	Description	Valid Range
wght	weight	1—1000
wdth	width	>0, percent of normal width
opsz	optical sizing	>0, point sizes
ital	italicization	0—1
slnt	slant	-90—90

Standard Axes for Open Type 1.8

Adrian Frutiger’s Univers Type Family, 1957

fantastic

Quisco

fantastic

Quisco italic

Italic

An Upright Italic



$

Variable Font Substitution Tool, vfbounds.occupantfonts.com with Nic Schumann, 2020

Tracking guidelines for iOS, Apple’s Style Guide

Variable fonts blur the line between the type maker and type user

DJR Talk: “We Are Family! I’ve Got All My Variations With Me”

Using Variable Fonts

Device flexibility, navigation menu for Occupant Fonts Site

A customizable e-reader with variable weight axis Site

Harmonizing with other scripts and fonts Site

Sample uses of Start Script for Panera, by Victoria Rushton

An optical size axis for various media

A variable “underline” glyph for pairing, with 2 stylistic alternates

Parametrization of a design Site

SF Symphony Branding, by COLLINSSource

Chee Variable by Ohno Type, James Edmonson

Variable font formats provide a new way to select a font style—
a slider replacing a dropdown menu. But the true advantage with the format is the ability to programmatically specify a precise point in a design space.

Mantar Minisite, by typeface and website designed by Cem Eskinazi & developed by Nic Schumann Site

Fonts live as data

Metaflop modulator, based parameters of Donald Knuth’s MetafontSite

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

Custom Font for Brown Arts Institue, Movements Site

Slant axis responds to the time of day in Providence Site

Type Phase, by Elias Hanzer Site

Kachi Buwa Variable Font, by Emi Takahashi Site

Wind Variable by Hansje van Halem Source

Radio Amnion, for Jol Thoms, with Minkyoung Kim Site

A moonphase variable font

Seasons in Pentameter, with Laurel SchwulstSite

Trekker/Browser by Tiger Dingsun Site

Student Work from the class Web Type Site

Choreo by Dan Luo Site

Custom-named axes allow the type designer to define
a functional or semantic purpose to formal variation — which can then programmatically respond to any kind of input

Technology is the active human interface with the material world

Ursula Le Guin, “A rant about ‘technology’” Essay

Thank you!

marie@motsuka.com