Letterspecies

The history of graphic design reveals a continuous reinvention of the discipline with the emergence of new technologies, providing means to new ways of designing and paving the way for new and unexpected design experimentation. For instance, computational generative processes are being employed in the development of various types of design projects, including dynamic visual identities, generative poster and cover design, and generative type design.

Figure 1

Demonstration of the Letterspecies system.

In this context, this work combines type design with generative processes on a generative web-based tool capable of automatically generating letterforms or glyphs. Each glyph is created by filling a pre-extracted typographical skeleton using an algorithmic drawing technique. Each drawing technique provides a unique visual style to the generated glyphs. The user can configure different parameters specific to each drawing technique and this way achieve a wide variety of glyphs consistent with her/his visual preferences. The presented tool, which is online at cdv.dei.uc.pt/2019/letterspecies, can generate the glyphs in real-time, allowing the fast visual feedback of any adjustment in the parameters. At any moment, the user can export a font file, which can be used in most software design tools or share a link to the editable configuration of the font.

Behaviour

The system receives two inputs. The first input it’s the typographical skeleton and this is because it provides the main structure to work around as well as the legibility needed to generate the glyphs. The typographical skeleton can be seen as a structure that represents the fundamental shape of a specific glyph. In the programmatic domain, it consists in a sequence of two-dimensional points that define the lines that form the centre of a specific glyph shape. All the typographical skeletons are extracted from open-source fonts such as Google Fonts and the Velvetyne Type Foundry.

The algorithm to extract the typographical skeleton is based on the work made by Parente et al. therefore its applied the Zhang-Suen thinning algorithm to extract the fundamental lines from a binary image of a glyph by removing every redundant pixel (the farthest pixels to the centre of the shape) to the recognition of the glyph. Therefore, the typographical skeleton is achieved when no more unnecessary pixels can be removed. This process is performed for each glyph contained in an array of the most used glyphs. For each point of the skeleton, we have the x and y coordinates and a value that corresponds to the radius (distance to the closest point outside the shape) of a circle at the corresponding point (see Figure 1).

**Figure 2**
Extraction of the typographical skeleton from the glyph “a”. From left to right: original glyph; calculation of the skeleton points; skeleton points; glyph recreation with the circles obtained at each point.

The system has a set of pre-calculated typographical skeletons to apply different drawing techniques. Whereas the skeleton is the basic structure of a glyph, a drawing technique can be seen as the “flesh” that gives shape to the skeleton. It provides the stroke style that forms the glyph. In visual terms, each drawing technique is different due to a combination of one or more shapes that can be geometric or abstract. In technical terms, consists of a programming method that receives the data from the typographical skeleton selected and the values of the parameters related to the drawing technique selected. Also, each one has its parameters that influence the visual aspect of the glyph. This means that the user can customize the set of parameters at its will to achieve the result that like the most. Additionally, in the future, more drawing techniques can be easily added. In Figure 2, it is possible to observe the glyph “a” rendered with different drawing techniques implemented on the web system.

**Figure 3**
Glyph “a” generated using different drawing techniques of the system on the same typographical skeleton.

System as a web-based tool

The system is incorporated on a web platform to make it a usable tool for type design. To do so, we give to the user the controls over the: (i) configuration parameters that influence the visual of the glyphs, as well as the options to export the font generated; (ii) the preview area which provide a fluid interaction to the user by generating and rendering in real-time the glyphs with the parameter’s values defined by the user; and (iii) the export area that has the options to export the font in OpenType Font (OTF) format, share the font via URL, export an SVG file of the current text rendered and can add the font to a gallery.

References

F. A. Pereira, T. Martins, S. Rebelo, and J. Bicker, “Generative Type Design: Creating Glyphs from Typographical Skeletons,” in Proceedings of the 9th International Conference on Digital and Interactive Arts, New York, NY, USA, 2019.
- Bibtex
- |
- Link
- |
- PDF
F. A. Pereira, T. Martins, S. Rebelo, and J. Bicker, “Web-based Tool for the Generation of Letterforms,” in Proceedings of the 10th Typography Meeting – Borders, 2019.
- Bibtex

Author

Fábio Pereira

Sérgio Rebelo