Exploring Typography with Processing
An Interactive Introduction
Generative intro sequences from TypeForm
Design is solving problems, and typography is solving problems by making marks.
- John Kane
Typography is an integral part of graphic design. In an effort to buff my design skills and dive deeper into typography, I began reading A Type Primer by John Kane, who coincidentally also teaches typography at Northeastern University.
Kane emphasizes an understanding of the letterform in several ways. One exercise places the same letter from different typefaces onto a grid, then observing the differences in symmetry, weight, arcs, and other characteristics.


Grid animations of Baskerville and Farnham
I built FloatingType to make learning typographic syntax fun and interactive, and built TypeForm as a tool for creating 2x2 grids to explore the forms of Baskerville.
Typographic lexicon is expansive, ranging from intuitive terms like "median" to more esoteric terms like "crotch". To make learning typographic syntax more engaging, I created FloatingType in p5. Letters float about the canvas and when shaken, display a term (and a pun, for fun).
Walkthrough of FloatingType
Another way to understand a typeface is to examine its letters closely, observing how balance between form and counter-form is achieved, and to appreciate each letterform's unique characteristics. A typical exercise involves creating interesting compositions through scaling and placing letterforms in a grid.
I built TypeForm so users can make a two by two grid of their own and explore the forms of Baskerville.
Users build a 2x2 grid to explore the forms of Baskerville
Users resize and reposition a letter of their choosing four times. The final two by two grid is created by stitching together their individual submissions and can be downloaded as a png.
Grids made using TypeForm are displayed below.

