Saturday, April 22, 2017

Mapping the World of Fonts


IDEO has created an interactive map which organizes fonts by their visual similarities. The map provides designers with a tool to explore, 'understand and see relationships across more than 750 web fonts'.

IDEO used machine learning to organize different fonts into a 2D plane based on vision pattern recognition. This 2D plane of fonts organized by visual similarity was then turned into a fully interactive and searchable interactive font map. Using Font Map you can pan and zoom around this 2D plane of fonts exploring different font families by visual similarity.

You can select individual fonts on the map to view the font's name, its page on Google Fonts and a list of similar fonts.

You can read more about the convolutional neural network used to group the fonts and the algorithm used to turn the results into 2D plane on this How To blog post.  IDEO appear to have created their own custom interactive map interface for exploring the fonts organized by visual similarity. However you could easily achieve similar results using an existing mapping library such as Leaflet.js.

No comments: