Art/Code Example: Type Design

I‘ve used enough words to describe this project. It’s time for some pictures. One day soon I‘ll record videos detailing how to use the app, but today’s post is just a quickie.

Let’s look at a simple example of how you might design a typeface in the tool (I’m not a type designer, so please forgive the clumsy letters). The A and N below were drawn using familiar vector path tools, but each drawing step was recorded in the script you see on the right. Later on, I edited script a bit so that the all the letters could be edited at once.

The GIF below illustrates how each of the rectangles above the glyphs control a feature shared by the letters. The blue box controls the thicker lines, the green box controls the thinner lines, the dark gray box controls the height of the crossbar, and the light gray box controls the width and height of each letter.

These rectangles were drawn by the user, measured in the script and then assigned to variables. You could edit the script directly to achieve the same effect as moving/scaling the rectangles, but as Bret Victor has said, then you’re just manipulating symbols. True, the rectangles are still symbols, but they have an obvious visual relationship to the end result.

I created this example to show that this isn’t about writing text. It’s about creating structured artwork that you manipulate directly on the canvas in a meaningful way.

The GIF below shows me stepping through the script one action at a time. I apologize if it goes too fast to read, I just wanted to give you the idea until I record a real video.

Drawing the letters one step at a time.

What you see happening is that I draw a bunch of scaffolding lines based on the control rectangles. Then I trace the scaffolding and use boolean operations to construct the resulting glyphs.

This tool is still very raw and everything you see here is an experiment waiting to be discarded or improved. I’m taking the risk of showing it early because I’d love to get feedback from real designers about how they could see this improving their work. I’ll show more examples soon.