Font Sort

Sort the Google Font collection based on the visual qualities of letter forms.

Here's how it works...

Enter a word in the textfield

Type a word or some characters in the text field - only letters (upper and lower case) and numerals (0-9).

Font title

Click a font title to sort the collection by that font: from closest match to most different.

Font detials

The text below each font title provides some detail: style, weight, mass, match.

The Match score indicates how similar a font is to the current selection. 100% is a perfect match.

The Mass score indicates how similar in weight a font is to the current selection. 0 indicates an identical mass.

Click the F icon to open the relevant Google Font page.

Heat map

The heat-map indicates how each character compares: black pixels match; green and red miss.

Tabs

Click a tab at the top of the page to re-order the collection: alphabetically, by match, by mass.

And that's it. Hopefully it will give you a fresh perspective on the Google Font collection and reveal some of the hidden gems within it.

Tech notes

The app loads a 40x40 matrix (1600 pixels) for over 106,000 different characters (169,600,000 pixels). The app uses that data to match and sort the collection. The work is done live in your browser and for that reason mobile devices will struggle.

The matrix data for the 106,000+ characters is hosted in a Google Sheet.

The app only compares the characters listed in the text field. Different words / characters will give different results.

Disclaimer

This is an experimental sketch. It is not a Google website.

 

Click OK to clear this text. Click the About link at the bottom of the page to show it.

@gravitron

OK

More

Loading data