The tool, called Font Map, is an interactive that lays out the letter “A” from more than 750 typefaces from Google Fonts. Clumps of black letters populate the light gray backdrop of the map, which shows how the typefaces are related visually. Serifs are grouped on the left, while sans-serifs populate the right. Hover over any “A,” and the font’s name and sample “Lorem Ipsum” appear; click on any “A” and a sidebar shows you similar fonts. A search bar enables you to find any font included on the map and view its typographic brethren.

Imagine asking a type designer to arrange 700 different fonts on one poster,” says Kevin Ho, the software design lead at Ideo who created the Font Map. “Instead of asking a designer, we asked an algorithm to do it.”

Ho used two open-source algorithms: One was a convolutional neural network that can recognize images of real-life objects like cats, dogs, cars, and boats, and categorize them. The other was a t-SNE algorithm, which takes organized information and displays it in two dimensions. He says it was surprising just how well the machine learning algorithm was able to categorize fonts, given that it was not trained using typefaces; it grouped them into serifs and sans-serifs on the first try, using just the differences between the letter “A.”

But there were still many flaws, so Ho reached out to designers in the type community to ask how they think about the differences between fonts. For instance, one trick designers use is to compare fonts with the word “handgloves,” because it reveals many visual characteristics including each font’s most distinctive letters. Using the “handgloves” trick, the algorithm was able to classify the fonts much more deeply, picking up on slighter distinctions like kerning and angles. The algorithm was able to group together monospace fonts, condensed fonts, and flat serif fonts within the broader serif and sans-serif categories.

It also handled more outlandish fonts exactly as Ho would have expected a designer to. “There’s a bunch of really weird unique fonts that don’t really fit into anything else,” Ho says. “[A designer would] probably throw all these random fonts into a random bucket. The algorithm did the exact same thing.”

advertisement

The visualization is not only interesting from a visual and technical perspective. It’s also a real tool that Ho believes creatives didn’t know they were missing.

In talking to designers both in-house at Ideo and in the broader community, he says they were most interested in a “similar fonts” feature. Often, designers will have a font in mind for a project, but when it’s finished the font no longer looks quite right. A tool that can show designers the most similar fonts to one they’re already using could be incredibly useful for that kind of situation. Ho says that when he began showing other designers the similarity sidebar, they would say, “Oh, I totally needed that the other day!”

Font Map is scalable–the same technique could be used on 1,000 or 10,000 fonts. It could also be used to generate new fonts. Ho says many designers he spoke with were interested in the white space between fonts on the map, which they perceived as a font-deficit. “Don’t read too much into [the space],” Ho says. “But it did spark this question of how could a visualization like this expose areas where type doesn’t have any fonts available.”

Ultimately, Ho hopes that the project will help designers think about how machine learning could be used to build tools just like this one. Perhaps one day, algorithms won’t be just categorizing fonts—they’ll be creating them too.

advertisement

advertisement

advertisement

About the author

Katharine Schwab is an associate editor based in New York who covers technology, design, and culture. Email her at kschwab@fastcompany.com and follow her on Twitter @kschwabable