Designing type with code
An approach focused on skeletons extraction and their anatomical deconstruction
As a graphic designer, the good use of typography has been crucial to create messages and add layers of content. Since the beginning of my master’s degree in Design and Multimedia at the University of Coimbra that I have been more interested in typography. Besides, nowadays we see more and more projects that take advantage of code to create unexpected and creative results. In my master's thesis, I decided to create a computer system to design fonts in a generative way.
The development of the structure of the glyphs
The first big goal of this project was the generation of the glyphs structure. We decided to start by extracting the skeletons of existing typefaces. Thus, we make sure that the generated glyphs followed the traditional font design rules. We used the Zhang-Suen Thinning Algorithm that extracts the structural lines of a binary image, so it is ideal for our case.
Division of the skeleton into strokes
With the skeletons extracted, we needed to find a method that identified the different parts. After analyzing the generated skeletons, we noticed that when a point was part of three segments it divides different strokes of the skeleton. A stroke is composed of a list of points, but in general, they are more than two and a set of strokes compose a skeleton. We scanned all the points of the skeleton and when we found a border point we created a new stroke, and so on till the end. Figure 3 presents the process of skeleton extraction and division into parts of an ‘h’.
Skeletons recombination
The next step was the combination of parts between different skeletons. To each glyph we needed to assess which were the strokes of each skeleton could be associated with each other. To do that we determined the angular velocity and the central point of each skeleton. Therefore, each stroke did not need to be totally equal to the other to be associated. To put it in context, angular velocity is a vector that represents the process of changing the orientation of a given line. The central point is an average of all points of the part in question.
The association process started with the ordering of the strokes of the first skeleton, from the longest to the shortest length. Then, each of these parts was compared with all the constituent parts of the second skeleton and so on. When the compared parts had a similar angular velocity and centre point, they were considered corresponding. In the end, we had, for a given character, several versions/skeletons for each stroke. Figure 4 presents generated skeletons by the recombination of skeletons of different typefaces.
Division of the skeleton into strokes
The last part of the process was the development of the structure of the glyphs. The first step of this project, the extraction process, started with the exclusion of the pixels furthest from the centre of the shape. Therefore, when calculating the distance between each the pixel of the extracted skeleton to the nearest pixel from the border, we determine the “width” of the original typeface. With this measure, we can replicate the glyph, or increase or decrease the weight proportionally.
Then, using different shapes (e.g. circles, triangles, squares, or abstract shapes) repeatedly we fill the strokes of the final skeletons and generate typefaces using different colours and transparencies. The filling of each stroke is composed of the repetition of modules along the stroke line. To each generated typeface we could determine which typefaces we wanted as input an how many and the used colours and modules. Each chosen typeface had a colour and a shape associated.
More information about the project can be found on:
J. Parente, T. Martins, and J. Bicker, “Generative Type Design,” in Proceedings of the Ninth Typography Meeting (9ET), 2018. (Portuguese version)
