TL;DR OTF is a webpage that enables everyone to design a personal typeface. It’s a tool in which you can design a font only with your face. Visit OTF on: otf.bauhauslabor.de

The OTF project was created for the 100th anniversary of the Bauhaus School and presented as an exhibition at the Gutenberg Museum in Mainz in 2019.

Some ideas of the 100 years old Bauhaus — for instance to generalise fonts and make them work for a broad range of applications — contrast today with an increasing amount of custom fonts. Many larger companies are investing in their own typefaces to support their brand identity. There are several reasons for this. One is certainly to save in licensing costs, the other is that it has rarely been as easy to create a font file as it is today. Tools like Glyphs have made the font design process very pleasant. And now more and more companies are coming up with their own fonts, like IBM with IBM Plex, Netflix with Netflix Sans, and countless more.

To take this trend to an extreme, I’ve developed OTF. OTF is a font design tool that allows anyone to create a personalised typeface. To create truly personal typefaces, the complete design process is based on face recognition. Thanks to a machine learning algorithm, unique information like age, facial expressions and biometrics are extracted and translated into the font. There are several parameters that can be partially influenced by the user. Nevertheless, in order to really customise the font, there are some parameters that the user can’t influence, such as the font anatomy or the strength of the serifs, which for example reflect the age of the »designer«.

At the time of writing this article, 1734 fonts have been designed.

The user-designed fonts turned out to be very diverse, which made me very happy. My biggest fear with OTF was namely that sooner or later a font system would always generate the same looking fonts. I solved this problem by setting many different parameters which influence each design.

The type system behind OTF is line based: each letter is divided into lines. To follow this principle, I designed a basic font from which I could derive each letter.

In the image below, you can see the translation principle from letter to lines based on a small »e«. Each line defines the position of the anchor points from which the paths are drawn.

Once I finished designing the entire font, I calculated the position of each line as a percentage to the bounding box. This allowed me to change the bounding box, letting the letter adjust automatically to the new box. The only data I saved for my tool was the positions of the lines and their connections.

The next step was thinking about connecting said points. To connect the individual points, the tool needed to know from which line to draw which segment. As we know, every letter consists only of lines and curves, so for each direction in which a line or a curve could go, I wrote a script. As an example, a small »e« consists of seven coordinates (points) and eight commands.

In the end, I had a JSON file with more than 6500 lines that described all the letters of my font. There may be a simpler or more elegant way to write the letters, but at the time I was working on it, it was perfectly sufficient. 😉

Based on this information, I was able to generate each letter again with my algorithm. The tool took the coordinates and paired them according to the instructions, so that each letter is (re)created as intended.

You may ask, why not just create a variable font? In the beginning, I also thought about doing a variable font for the project. But the major drawback a variable font presents, is the lack of unpredictable results. A variable font is created by a human being, meaning that all its possible styles are limited within the shapes the designer envisioned. It’s also pretty hard to create a variable font with many axes, as they become difficult to maintain at high numbers. Therefore, a system consisting only of rules has the potential to create unexpected outcomes and is way easier to maintain.

Activate all parameters of the font-system

OTF is a web-tool. On the website you can browse all the fonts designed so far. To design your own font you have to start the design process by clicking on »Create font«.

The process is completely based on a face recognition algorithm. The algorithm I used is face-api.js by justadudewhohacks. Face-API can detect 64 unique points in a human face in real time. Next to the 64 points, Face-API is also capable of predicting the emotion, the age and the gender of a person. For OTF I used all of them except for gender and connected these detections to the font itself. As example you can see below the step which defines the slanted angle of the font.

To create fonts on a website I used opentype.js by Frederik De Bleser. This enabled me to write fonts in javascript. Every letter has been described in opentype.js commands. These commands are pretty close to SVG paths. Since the main focus of this project was the shaping, the fonts are not kerned or hinted at all.

Because the generation process is computationally intensive, only the letters »hämbürg« are generated during the design process on the client device. This optimises the performance on most devices. The generation of the complete font is then realised on the server side.

With help of Florian Jenett we created a Rest API. If the user is happy with the font, a JSON object with all the necessary data is sent to the server. The server can then generate the font, based on the information it received. Each font is stored on the server and can be offered as download. This allowed me to embed the font directly on the website, which then creates a typefoundry-like website. After each generation process the new font is automatically embedded on the website to be seen by everyone.

Every user can keep the font and use it as they please. If you are now interested in creating your own font, please visit otf.bauhauslabor.de

Thanks to Florian Jenett for the help.