The Visual Typeface Search Tool 

A more intuitive and in-context way to pick typefaces.

1 Week - Group Project with Miglė Padegimaitė

Skills -  GUI, Wire Framing, After Effects, Programming, Framer.js


Problem

Today the process of choosing a typeface is made much more difficult by a wide variety of options and a classification system based on an alphabetical list. This list relies on the user already knowing the characteristics of the font based on its name alone.

Inspiration

When we choose between fonts, we already have a specific set of characteristics in mind that we want the typeface to convey.  We need them to communicate a sense of honesty or a level of prestige, all of these characteristics are infused into the choice of typography.

These characteristics of typography can be arranged into many spectrums, Classical to Modern, Emotional to Steril, Authoritative to Approachable –  Within these spectrums represent the way our brains make sense of and categorize fonts.

 

Solution

Our micro interaction allows the user to morph a single letterform along one of these spectrum, in this case classical to modern. By dragging from left to right, the letterform morphs and transitions between typefaces. If you release your finger it snaps into place, ensuring that it never stops in a typeface that doesn't exist. Only after you have selected a letter form that you like, and a certain delay, the name of the typeface you have selected will appear. Since it is more important to choose a font for its characteristics and not name.

 

Here is the final documentation video, highlighting the micro interactions. When the letterform is in motion, it makes all other elements such as the classical and modern disappear, allowing you to focus on the shifting elements and highlighting the differences between each typeface. By making use of the morph, it communicates the differences between the fonts, more compellingly than any static comparison between letterforms.


Process

In order to understand how to morph from one letter form to another, I had to deconstruct the vector points of each letter, modify the number of points to smoothly transition form one to another.