was out of his mind one he set out on this mission, and we thank him dearly for it. In an effort to understand the data that makes up a typeface, he built himself a Font Exploration App
using opentype.js, collecting data from Google Fonts’ library. The data he collected and sampled were metrics like x-height, contrast, width, weight, and a few more.
The end result is fascinating to play with
(make sure you’re on a desktop device though), and his ultimate goal was to develop a more systematic approach to finding typefaces. The exploration app is able to categorize data into lists, classification types and meta data, this last one being the most fascinating.
What’s under the hood of a font file?
In theory, every font file comes with a variety of metadata tables that contain information about name, author, language and visual characteristics of the typeface. Width, weight and font family class are the obvious ones. But also information about xheight, cap height, average char width, ascenders and descenders could be found. Another set of metadata called Panose describes even more properties such as serif style, proportion, contrast and many more.
A fascinating thing to measure (and also, quite hard, mathematically speaking) is measuring the stroke contrast of a font:
The contrast describes the ratio of thin to thick strokes. There are typefaces with little stroke contrast, e.g. slab serifs or many sans serif typefaces designed for user interfaces, e.g. Roboto or San Francisco. There are others with a lot of contrast, such as Bodoni or Didot. To measure the contrast, we can trace the outlines of an “o” and look for the smallest and largest distances between inner and outer shape.
(you’ll find a GIF of how this was achieved below.)
Another interesting thing to measure is x-height, something I’ve miserably attempted to measure myself using canvas. Here’s how Florian did it:
In addition to the absolute measurement, it might be useful to also compare the x-height to the height of the ascenders. Thus, we can get percentage values such as “the x-height is 60% of the uppercase letters”.
To make the values comparable (some fonts use 1000 unitsPerEm, others 2048 unitsPerEm), it is necessary to normalize the values and map them to a range of 0–1.
For more font meta data geekness, read on. It’s worth every juicy nerdy detail of it 🤓