Week 12: Fonts as Data

Screen Shot 2018-11-27 at 8.34.43 PM.png

It took awhile to wrap my head around the structure of font data this week. I spent a lot of time noodling around with the examples and re-reading the tutorial. I also read up on curves and vertices in the P5 Reference, and hey, I really like how those bezier tangents look!

Breaking down the example code piece by piece helped me with the head wrapping. I learned that after loading the font into a sketch, the opentype.js library parses information about how to draw each letterform. Imagine an invisible pen drawing the outline of a letter in one continuous motion. The information parsed with opentype, gives you all the instructions that pen moves from point to point in order to complete the letter. The path that the pens travels can be straight or curved.

The instructions or commands to draw the entire path of a letter consists of many objects of information, and there are five types of objects:

  • the pen’s starting location, represented with a pair of x and y coordinates (labeled with a M)

  • two pairs of x and y coordinates through which to draw a line (L)

  • coordinates to draw a bezier curve (C) - for OpenType fonts (.otf)

  • coordinates to draw quadratic curve (Q) - for TrueType fonts (.ttf)

  • finally, the starting location to close the path (Z)

With this understood, I had least two options at my disposal for this week’s exercise. First, I could mess with the global data points of a font. For instance, I could add the same amount to the x coordinates for all L-type objects. Or, I could adjust the elements in each L-type object differently. I played the first option for both examples below.

Example 1 Because I was so fond of the bezier tangents, I decided to incorporate them and was quite pleased with the results (especially after many disappointing runs with other approaches).

Of note, the size of the font and the number of points from which to draw tangents impact the final look, as well as the order of the points in the methods. Even though this only alters curved paths, I find it balances the untouched straight lines in the over composition.

This is how I feel at the beginning of the semester: fresh, bright, and ready to dive in:

Screen Shot 2018-11-27 at 7.35.27 PM.png

But towards the end, sleep-deprived but still driven, my edges spaz out:

Screen Shot 2018-11-27 at 7.32.23 PM.png

See the code and try it here.

Example 2 Reading the code I noticed that following each object-type command, the x and y position are “reset” to set the starting point for the next instruction. Curious what would happen if I removed those, I found a wonderful surprise: individual glyphs with a balance of curved and straight lines. Asemic for sure!

See the code and try it here.

Screen Shot 2018-11-27 at 8.25.32 PM.png
Screen Shot 2018-11-27 at 8.25.55 PM.png
Screen Shot 2018-11-27 at 8.30.22 PM.png