How I use Figma to streamline the process of finding the perfect typeface.

Part 1

What job am I asking this typeface to do?

In my design process, I like to leave designs free of color and typography for as long as I can. High-fidelity details can be distracting early in a design process.

But, when the time comes to add in typography, selecting one isn’t an arbitrary decision – I first ask myself some questions.

What do I need this typeface to accomplish?

Should my typeface be attention-grabbing or should it be more traditional? Do I need something fun, or would something scientific work better? Confident or gentle?

Do I really need more than one typeface?

Is there something I am looking to achieve that cannot be accomplished with variants of 1 typeface?

Learning 1 – Start with goals, not with aesthetics

part 2

Finding The One (or Two)

After I’ve identified what job I am asking my typeface to do, I can begin exploring visual characteristics.

If I want my text to read as confident and elegant, I think about how my goals could translate to visual characteristics of a typeface.

Would a confident font be bold or thin?

Would an elegant font be geometric or curved?

When I have a clear understanding of what I am looking for, I start searching for the one.

I avoid browsing Google Fonts, or Adobe Fonts because the number of options is overwhelming. I keep running lists of typefaces that I like, so I’m not starting from scratch.

Learning 2 – Form is function, visual characteristics are a method to achieve goals

part 3

Decision Fatigue

The lists I’ve made in the past have never been as useful as I hoped.

Four (extremely inefficient) ways I’ve attempted to document typefaces.

1 – Links in a Google Chrome folder
2 – Unlabeled screenshots in a folder
3 – List on my iPhone
4 – Scribbled names in my notebook

My methods did not turn out to be useful, because my lists only referenced the names of the typeface. At best, I had a list of links to bring me to an example of a typeface; and at worst I had only a name.

Learning 3 – Searching for a typeface is a visual task

part 4

Visual Categorization: A Cute and Useful Solution

Using Figma as a living document is a flexible, fast and visual way to organize the fonts I love. Below are a summary of my final learnings from this process.

Autolayout

Using a series of nesting Autolayouts eliminates fussing with pixels, and allows me to quickly add or rearrange a typeface at anytime.

Components

Working from a Main Component ensures consistency. In the component, I added colored lines as a label to show where the font is available (Adobe Fonts, Google Fonts & Shopify). These labels can be used as as on/off switches for the child components.

Categorization

Grouping typefaces into categories with other similar fonts reduces cognitive overhead by eliminating options that aren’t relevant.

Flexibility

Using Figma lets me quickly zoom in to study the curvature of the letterforms, and easily copy potential options to do the side of the document. Performing the entire process in Figma also allows me to overlap two typefaces on top of each other to inspect if they are suitable to work together.