I made my first training model from an assortment of photos of beer. The results are a little odd, with some images looking okay at a cursory glance but more noticeable errors the closer you look.

I made a second training model using a subset of the beer photos selected for their uniformity (mostly similar photos of different, singular 16-ounce cans of beer on a white table with a white background). The depiction of beer cans is fantastic, but any other aspect of the photos, like if I asked for a background other than white, would be extremely abstracted.

I realized pretty quickly that I wanted to use this project to work with vector graphics, so I took the opportunity to make a training model to test more basic shape creation. Since RunwayML’s resources are limited to more straightforward image/video tools, rather than vector graphics, I created 30 jpgs showing a singular, capital, letter ‘A’ in different typefaces. The resulting output recognizes the shapes and patterns, but not that they’re letters.

As I narrowed down my concept to working with SVGs, I wanted to check on current abilities to create them. I checked a few different existing AI platforms to see how they responded. To the left is an SVG made by asking ChatGPT to make the XML code for a capital letter ‘A’ while on the right is one created by Adobe Illustrator’s beta AI tools.

I did an extensive search to see if this was already being worked on and, as expected, there are various image generation and SVG tools already. Since I’d been testing with basic letterforms, I searched for typeface generators and none existed at the time of this project. There were a lot of copy/text generators, but none for typeface design. In my search, I read through the work of Erik Bern, Måns Grebäck, and Jean Böhm, all of whom had conducted research and experiments into the capabilities of AI to generate letterforms.

I quickly realized that I wasn’t designing with my insights in mind, but rather letting existing applications decide the direction of my design exploration and user interactions.

After realizing this, I scrapped these ideas and started over by mapping the current workflow of typeface design. This would allow me to consider where AI could support the current process.

Since AI is fantastic at pattern recognition and reproduction, and the typeface design process is a back and forth dance of refining the consistency and visual design of the elements which will invariably end up repeated throughout a typeface, it was an almost natural leap to the refined concept behind the application: the AI can analyze the pattern of your design, while you design, and use that pattern to build out and make alterations to the rest of the character set.

Moving towards medium fidelity, I introduced a sidebar which gives a preview into how the AI is interpreting and processing data. It also allows designers to have manual input via supervised learning, allowing or disallowing interpretations of the data.

I looked at the interfaces of existing typeface design platforms, and design apps in general, to get a better sense of what designers are used to designing with. This would enable my design to be easily adopted.

Since my concept has evolved with the target audience becoming designers, at this stage it’s necessary to iterate towards a desktop application instead of a webapp.

This iteration also features the introduction of the “Stage” slider to tell the platform which stage of the process you’re in.

In an effort to highlight that there are AI features, I experimented with the idea of a pop-up modal which would appear whenever starting a new file.

Unfortunately, this precludes the idea of designers having differing workflows and forces them, potentially, into thinking they must select one particular way to work.

Although the modal wouldn’t end up staying, the use of color to indicate AI features ended up being a great highlight.

This platform should be seeking to empower the designer, however they want to work. To obstruct their design process with a pop-up goes against that. I mapped out a more circular workflow for the design process with AI seamlessly integrated into it.

This workflow assumes that the designer is going to be moving back and forth and, therefore, should have access to the AI features at all times, for whenever they might need them.

I conducted a brief exercise to figure out the visual design language I wanted to carry forward for the next revisions.

This exploration represents what would become the finalized layout of the interface. The previous buttons to access Layers and Character Set have become a separate sidebar on the left of the interface. I tried to depart from the primarily gray color palettes of most design platforms, but it’s overbearing here. There's too much color.

I pared back the use of color from the previous version and explored more ways to use the blue and purple to highlight the AI features.

This is how ChatGPT worked at the time I conceived of FontFacing. You enter a prompt then see a small dot, amounting to a "Loading" animation, then get your generated response.

This is a concept I'd come up with for FontFacing, specifically as a solution to a particular insight revolving around a startling lack of feedback and transparency in existing AI tools which often make AI seem like magical interactions. They also make it difficult to refine or iterate your prompts/interactions because there's no way to see how the previous interaction was analyzed.

As if to validate some of my conceptual work, late in 2024 OpenAI released a preview of their newest model, ChatGPT-o1. After entering a prompt, there's a flash of feedback which relates to parts of the prompt as if to say, "This is what you asked for, let me think about it."