Innovating Typeface Design —

Project

FontFacing: an AI-Driven Typography Design Application

Direction

How might we visually integrate AI features into the experience of a design platform?

Info

Desktop App
14 Weeks
May - August 2023
Solo Project

Tools

Figma
RunwayML

Concise

To only see the highlights and most important information, keep the toggle ON. If you’d like to read about every step of the process, turn the toggle OFF.

How might we...

...visually integrate artificial intelligence features into the user interface of a design platform?

Color Highlights Within the Interface

Designers are familiar with design interfaces and there are already a myriad of expectations when using a new design application. In this case, the majority of the interface involves shades of gray, as with most major design apps. The introduction of any color would be a highlight. A bright blue and a middle purple are used to bring attention to the AI features, sometimes alone (active/history) and sometimes as a linear gradient (generate something).

A mockup of a desktop app meant for typeface design, showing a working canvas with one glyph, toolbars, live view of the entire typeface, and an analysis window showing the training model as it analyzes inputs in real time.

Highlights

One detail of the app interface which shows a series of buttons (Sketch, Live Generation, Focus, Letterspacing) which users can use to move between working stages

A tab bar to select process stage

Since the typeface design process works in well defined stages, albeit with some back and forth, this tab bar allows the designer to indicate where in the process they are and to see when the native AI platform will be actively learning versus actively generating or adjusting.

One detail of the app interface which shows a window within the sidebar, Analysis, with some realtime AI analysis

Show how the platform analyzes

A specific window displays how the AI is processing input and also gives designers the opportunity to for manual input within that process.

One detail of the app interface which shows the canvas with a glyph being edited; below the canvas is a toolbar with options that are specific to what the user's currently doing on the canvas; this canvas has a completed letter but nothing's selected, so the context bar has a text input with the label text reading, `Describe what you'd like to generate or change about this letterform`, along with a `Generate` button and another button for additional options

Context Bar

As is being used more and more often in design programs, a contextual toolbar moves around the interface depending on what you’re interacting with and gives you context-specific options that may be particularly relevant. This allows AI features to be front-and-center without obstructing the workflow.

Research & Prep

I entered into this project with a very cursory knowledge of AI tools, never having used any myself. To begin, I created a few training models using Runway ML’s easy to use AI tools for insight into how AI parses information and what comes from the resulting training model. I then mapped out the process of creating a typeface and looked at existing tools within the space.

Type-Specific Training Model

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.

Insights

These are the key learnings I tried to keep in mind as I started to explore low fidelity wireframes and build out my concept.

AI systems often prioritize their capabilities over user interaction, leading to basic input methods such as text boxes. Shifting focus towards empowering users with what they can achieve using AI can enhance the design for more intuitive and impactful interactions.

Every word or pixel included in training data influences the output, especially concerning outliers, as AI lacks the ability to identify outliers without specific training.

The “magic” of AI comes from not knowing how input is being analyzed and processed, which can be confusing for designers. Transparent and understandable AI interactions will help enhance trust and comprehension.

For best results, users must go beyond data selection and make use of ongoing supervised learning and reinforcement of the model (which, for some AI systems, can be impossible for the user). This approach not only refines pattern recognition but also ensures consistent performance.

The Visual Design Aspects are not Linear

The sketching and digitizing stages of typeface design are extensive and may require multiple passes. Depending on the designer, the entire set of characters (lowercase, uppercase, numbers... 26-70ish characters at minimum or in the hundreds depending on the needs of the typeface) may need to be sketched multiple times.

An array of the workflow of typeface design, mapping out between stages, from Sketching to Digitizing to Finishing, as well as the multiple phases within each stage and arrows back and forth to show the non-linear nature.

Repeating Visual Design Elements

Many typeface designers will start the sketching phase by working on control characters, the design of which will help define other characters.

For instance, you can take the pieces of the lowercase ‘n’ to then work out the i, l, h, m, u, r, t, and you’d also have the x-height for other lowercase letters. After working on the lowercase ‘o’ you’d then have the building blocks for b, p, d, q, c, and e. You’d have to work on some of the finer details, but just from those two, the lowercase ‘n’ and ‘o’, you’d have a lot of the major work done for 15 characters, with the pieces necessary to work on many others.

Typefaces in the Context of AI

With the understanding that, at its core, a typeface is a visual pattern which repeats to make up all of the characters of that typeface, we can begin to see how AI and type design can intersect. The consistency with which that pattern is applied to the characters is what defines the visual style (and the feelings it imparts on the reader) of a font.

A training model should be able to figure out many, if not all, of the repeating visual cues from a relatively small sample size. Done correctly, an AI system should therefore be able to speed up the workflow of typeface design.

With the process in mind

what is a typeface?

A consistent collection of design elements that repeat and, as they combine, form the characters/letters that make up written language.

Existing Typeface Design Platforms

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.

A screenshot of FontLab showing a lowercase `a` being edited; along with the toolbar and sidebar, as well as the vector in the act of being edited, the screenshot also shows FontLab's ability to edit various font weights in the same frame by layering the different outlines on top of each other.

Making fine adjustments between font styles of a typeface using FontLab.

Prototyping

I could feel the final versions beginning to take shape, but there are still some details to figure out. The modal was perplexing me. It’s a good introduction to the AI features, but perhaps only for a new user or for a casual designer. For the experienced designer the modal could simply be obstructive to beginning work.

Rethinking the Workflow

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.

A map of the ideal workflow for the platform, showing a kind of circular path where the user can go back and forth between different tools and the AI tools are meant to fit seamlessly into the different steps.

Exploration & Iteration

Exploring Toolbars

To be able to access all of the AI features at any time, I explored a variety of layouts and placement for them. This included iteration on the various toolbars.

Context Bar

To further empower designer workflows, I explored some of the functionality behind the contextual toolbar.

A medium fidelity prototype combining the previously explored elements with the current concept; the sidebar has been simplified and the infinite canvas has been replaced with an artboard system to focus on singular glyphs while working; the toolbar has also been simplified with some tools removed and AI tools moved to an Options Bar at the top of the app.

Putting the Elements Together

This version changes the previously “infinite” canvas, with the whole character set next to each other, into more of an artboard or frame where you can work on one character at a time, more familiar to the graphic designers who use Adobe products. The AI also has a permanent home in the Options Bar and there are additional elements to access the rest of the character set and working layers of the currently selected character.

Visual Design Elements

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

Low-fidelity wireframe of GPS directions

Low-fidelity wireframe of GPS directions with a pop-up notification which says `Handoff: moving your music and navigation to your car.`

From the previous pop-up notification, this low-fidelity screen shows the notification expanded with 2 options to select: cancel or okay

Finalized Layout

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.

A high fidelity wireframe with a more colorful interface which has replaced the predominantly gray interface; some of the buttons have been moved into a second sidebar so that the analysis and navigation are on one side and the glyph selection and layers are on the opposite side. There's too much color.

Finalized Interface

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.

A high fidelity wireframe building off the previous version; most of the color has been replaced with the shades of gray and there's a selective use of violet and blue (and the gradient between them) to highlight the AI tools and related features (like AI history and the Analysis window).

Project Validation

Introducing

A mockup of a MacBook running the desktop app, showing a working canvas with one glyph, toolbars, live view of the entire typeface, and an analysis window showing the training model as it analyzes inputs in real time.

A mockup of a MacBook running the desktop app, but this time the canvas is blank so there's no contextual menu and the analysis window is also blank.

Final Thoughts & Next Steps

As developed, the concept itself is structurally sound and I firmly believe that it could successfully empower designers. There would be a lot of difficulty surrounding the base training sets, since the platform would need extensive training on typefaces to understand the anatomy and character sets. Typefaces are intellectual property and their use for AI training could be contentious.

Given the opportunity, I would love to continue exploring this concept. The opportunities to explore micro-interactions are endless. Some of the areas I’d like to continue iterating on are the Options Bar and the Stage Slider, since there isn’t a clear indication that they’re stages of the design process meant to be moved through towards an end goal. This is also, roughly, the bare minimum the application would require to be considered a serious design application. Professional typeface design has a plethora of functions which aren’t represented here that would need to be worked into the interface in some way. Not everything can be folded into a menu.

A mockup of a MacBook with the Fontfacing app opened to fullscreen to start a new project, with buttons available to start a new file, Open a file, as well as alternate open options, plus a featured banner for a trending font.

More —

UX Design for the Apple Car

Innovating Typeface Design —

Project

Direction

Info

Tools

Concise

How might we...

Color Highlights Within the Interface

Highlights

A tab bar to select process stage

Show how the platform analyzes

Context Bar

Research & Prep

Type-Specific Training Model

Insights

The Visual Design Aspects are not Linear

Repeating Visual Design Elements

Typefaces in the Context of AI

With the process in mind

what is a typeface?

Existing Typeface Design Platforms

Prototyping

Rethinking the Workflow

Exploration & Iteration

Exploring Toolbars

Context Bar

Putting the Elements Together

Visual Design Elements

Finalized Layout

Finalized Interface

Project Validation

ChatGPT-4

Insights for FontFacing

ChatGPT-o1 Preview

Introducing

Final Thoughts & Next Steps

More —

UX Design for the Apple Car

Work

Side Projects

Max Wright