Design & UX
Article
By Daniel Schwarz

IDEO Font Map: A Faster Way to Find the Best Google Fonts

By Daniel Schwarz
IDEO Font Map

Navigating by chart.

How do you deal with responsive typography? Check out chapter 4 of Chris Ward’s new book, ‘Jump Start Responsive Web Design, 2nd Edition‘.

Google Fonts offers a vast and varied collection of easily embeddable web fonts. 818 fonts to be exact! But how do you find the right font for your web design out of 818 options? Even if you’re using the search filters (Serif, Sans Serif, Display, Handwriting, Monospace, etc) to narrow down the results, often enough, you’ll still end up browsing through a series of non-contenders before you find the right one. Picking fonts can be very time-consuming!

Enter the IDEO Font Map, which intelligently uses machine learning to group similar (Google) fonts together on a digital interactive map. Let’s see how the IDEO Font Map compares to using Google Fonts directly.

Google Fonts vs. IDEO Font Map

Even though Google Fonts is a delight to use (its interface is refreshingly clean), finding the perfect font can take quite a bit of time, because the sorting of the search results is random. Also, the navigation is linear — there’s only one direction that you can go, and scrolling is the only way to get there. It’s a matter of scrolling, scrolling, scrolling until you find the font that you need, and, if you find a font that almost fits the bill, there’s no “browse similar” function.

Not very time-efficient.

Google Fonts screenshot

With machine learning, Font Map is able to visually distinguish one font from another and carefully display each one on a digital canvas (reminiscent of an old, vintage, hand-drawn map).

IDEO Font Map vs. vintage hand-drawn map

Imagine the map as a country, where the font samples are the locals. As you travel between the different lands, the local dialect changes very slightly. In this example, the dialect is a metaphor for the different fonts that are spread across the map.

In the south-west region lives the sophisticated serif fonts, and in the south-east, modern sans-serif fonts. As you travel north, the fonts start to become a little rougher around the edges. You’ll find the whimsical handwritten fonts in the north-west regions, and the wacky display fonts in the north-east.

Interesting observation: since a font cannot be both serif and sans-serif, there’s an empty space in the middle of the map!

Going on a Quest to Find the Perfect Font

Start by doing a quick eye-scan of the map to find a font that sort of resembles what you’re looking for (or if you already have a font mind, type it in the search bar on the left). Then, observe the surrounding fonts and choose something that’s similar, but fits the bill a little better. With each “step” you should draw closer and closer to the font you’re looking for!

Choosing fonts with IDEO Font Map

Tip: when you select a font, you’ll see “Similar Fonts” in the sidebar along with the font name and some lorem ipsum sample.

Conclusion

With the IDEO Font Map, you have a clear direction (and a map to get you there!). With Google Fonts, you’re scrolling and hoping for the best. The end result is the same, but Font Map could help you choose a font faster.

How do you deal with responsive typography? Check out chapter 4 of Chris Ward’s new book, ‘Jump Start Responsive Web Design, 2nd Edition‘.

  • More Spinach

    Far cry from the “fastest way”. The stupid map is basically unusable on a mobile. And instead of this pretty crap, a simple listing of Sans Serif, Serif, Monospace, etc would do. These kinds of pretty but dysfunctional “designers” are the precise problem with the industry. And tossing in “machine learning” jazz doesn’t help. It’s unclear what machine learning was needed for this rubbish. Google’s categorisation is already much handier.

    • To each his/her own, but I flatly disagree.

      1) Photoshop doesn’t work on a phone either. It’s design aid for use on a computer.

      2) A cursory glance at the relationships between the typefaces tells you it’s more complex than just placing all the serifs together. That would be of little value. Instead you’ll find a script typeface alongside a san-serif, next to a block serif – grouped by some combination of weight and line quality.

      It’s a just different way to understand relationships between typefaces and perhaps make connections to fonts you wouldn’t have considered otherwise. Google Fonts built-in tools are great, but there is more than one way to look at a problem.

      • P.K. Hunter

        Interesting views. While I find the tool to be a creative experiment, so on this I disagree with “More Spinach”, I do see how a simple listing of font categories with their characters in a quick fox sentence will be more helpful, more quickly. The categories can be a bit more nuanced than serif or sans serif. They can easily showcase stuff that belongs together in a listing.

        And I couldn’t agree more be vehemently with the notion of tossing in machine learning everywhere. Either explain wht precisely is being machine-learned that’s such an incremental benefit from simple observation or more traditional analytics, or STFU. That’s my message to all these cool hipster firebrands trying to bastardize a perfectly good industry.

Recommended
Sponsors
Get the latest in Design, once a week, for free.