Vectors and Type in Code

Programming Design Systems, Week 5.

In this class we will investigate vectors, how to manipulate the outline vectors of existing fonts, and how to create rule-based fonts from scratch.

Vectors

I order to manipulate existing typefaces in code, we have to look at the concept of vectors. A vector is simply a small Javascript object that can hold a x and y value. So instead of needing two variables for each location, you can store it in a single variable.

This code example demonstrates how vectors can be used to define an outline of a path. This is also how typefaces are saved (however, they also use Bezier curves). Code example in P5.js Web Editor.

Typography in P5.js

Let's look at text and how to manipulate outline vectors in P5.js with the opentype.js library.

This example shows how to draw basic text in P5.js. Keep in mind that the font needs to be installed on the users computer in order to render. Code example in P5.js Web Editor

This example shows how to use a Google Web Fonts in P5.js. Code example in P5.js Web Editor

This example shows how to load a font file in P5.js. Code example in P5.js Web Editor

This example shows how to load a font file with opentype.js and manipulate the vectors. Code example in P5.js Web Editor

This example shows how to create a rule-based font from scratch in P5.js. Code example in P5.js Web Editor. Imagine how these ideas can be ported to Chinese characters (214 radicals).

Books

The Elements of Typographic Style by Robert Bringhurst
Type + Code by eohyun Ahn and Viviana Cordova