The Anatomy of a Thousand Typefaces

https://medium.com/@getflourish/the-anatomy-of-a-thousand-typefaces-f7b9088eed1

by janpio • 9 years ago

86 12 9 years ago

Hey, this is awesome! One major issue/annoyance with design and typography is organizing, sorting and sifting through an ever-expanding font collection. For the longest time I wanted a font manager that organized fonts by various tags/classifications. FontExplorer X added that somewhat recently, but this takes it a bit further. The ability to sort by ranges of x-height, width, etc can really help with find good good font-pairing options. Obviously, this could become much so much more useful with a larger library of fonts. It would be interesting if there was a central database where everyone could anonymously upload the results of their own library. Such a database could be helpful for people trying to find similar fonts, better pairings or just a better way for font managers to organize fonts.

florians5• 9 years ago

I’ve started to implement a way to parse local fonts via drag & drop (no actual upload required). This will enable to create a personal database and eventually be a foundation for a shared, larger database. But before getting into this, I want to improve the measurements first and I’m happy about some suggestions that have been made here already!

sprokolopolis2• 9 years ago

That is all good to hear! I look forward to seeing how the project evolves.

trhaynes• 9 years ago

Amazing work, and presentation. Thanks for writing.

florians5• 9 years ago

I’m glad you enjoyed reading.

matthberg• 9 years ago

https://getflourish.github.io/anatomy-of-typefaces/app/ Here's the data itself!

sharmi• 9 years ago

This is awesome, it is all that I wanted from Google fonts but did not get. Definitely bookmarked. I can see this saving hours and hours of rummaging for fonts on Google and blog posts suggesting purportedly good font combinations.

Given this, here are a few things I would like that I find useful in google fonts

1. Info on how many weights are available (though the app gives the number of styles, it does not name them)

2. The ability to test with your own text. This is most useful when you are trying out fonts for headings. To be able to decide that in the app itself without having to iterate combinations by implementing in sites being developed will be a godsend.

3. This might be a bit too farfetched. The size of the font files for latin character sets. It can give you an idea of how much bloated your website is going to be. (This could be a filter maybe?) Typically now, I download each font file to inspect it's size.

Kudos!

florians5• 9 years ago

1. Adding previews for the weights/styles is already on my list :) 2. I initially starting the project when trying to pair fonts and stress test them with my own content. Using the tool to find and save fonts for real projects hasn’t been the focus, but the data will surely end up in something you’re looking for. 3. File size, yes, that’s something I can add. Large file size might even be a hint for very large character set?

microcolonel• 9 years ago

Very interesting work. I'm thinking it would be nice to add measures like this to FontConfig so that open source font libraries and widgets (on systems which use FontConfig [Linux {including Android I think}, and GTK apps on Windows and Mac such as Inkscape]) can help users make more principled selections.

Also, since FontConfig does indexing a) in native code and b) only at install time, more robustness could be built into these measures without runtime cost, including having a detector for fiercely unconventional fonts (like Libre Barcode or Wingdings) which would present basically garbage results with these metrics.

I would make an adjustment to the measurement of weight, to make it the shaded proportion of the area within the outermost convex hull of the outline, rather than the shaded proportion of the bounding box. A way to accomplish this with o (without changing your technique completely) is to flood fill the outside with a third color, then measure the ratio of white to black.

Then the next enhancement would of course be to figure out the logical mapping of these metrics to other scripts. Cyrillic (with Kha height instead of x-height, and о instead of o) is straightforward, Hangeul is harder, communist and republican Chinese characters readily break rules for text color when juxtaposed, Japanese has three writing systems to assess.

As for the application, it would be nice to see the histograms update in relation to eachother (maybe with two toplines, one for the overall histogram, and one for the intersection of the other selected ranges), so I can see the clustering of the histogram when I select a certain weight range.

Also, there seems to be a bug in the range filtering, since all of the results are outside the selected range for me.

florians5• 9 years ago

Thanks for your detailed feedback. Your suggestion for measuring the weight more precisely is what I’d been thinking but didn’t figure out how to do it. Introducing a third color is such a simple way to do it! I’ll look into this.

I will reconsider updating the histograms to reflect the current filtered subset. I tried this in the past but ended up with cases with very little results and thus small visible areas in the histograms that often required to reset filters. But I agree that this would better reflect the filtered data.

Thank you.

Theodores• 9 years ago

I would be inclined to tackle this problem 'starting from scratch' rather than trying to make sense of existing ways to sort/choose fonts. So principle component analysis might be one way to go, maybe identifying new 'principle components' to better sort/arrange fonts by.

I also wonder if the work done in OCR could be useful. To be able to recognise a font takes you half way there to categorising a font.

Another thing with font choosers is that sometimes you need a font sympathetic with existing material, perhaps a licensed font that you just don't want to run on a website. Maybe that font has an opentail 'g' and you really need to restrict your choice to fonts with an opentail 'g'. Or you find your best match font and then a little while later find that it has the wrong style of 'a' that you ended up with. There is no easy way other than typing in a better 'Quick brown fox...' and sifting through previews, ideally you would want to refine by things like opentail 'g' - something a layman can understand and not a typo term.

florians5• 9 years ago

Very good points. Especially the glyph-specific features you mention (a, g, …) are definitely of my interest and the origin of the project. I think I‘m only at a point where I arrived at a basic foundation that hopefully will enable me to do the things you mention. Thanks for your insights!

The Anatomy of a Thousand Typefaces

Related Stories