Normalize Fonts for Comparison

Tags: tech, Date: 2023-04-10

In short, comparing fonts at the same font size is almost never the right thing to do. Compare them at the same x-height or, better yet, at the same space usage.

In full, recently I wanted to choose a font that looks good on screen at various resolutions and also in print. This is fairly subjective, of course, so there is a lot of noise out there. Going by the LaTeX Font Catalogue, Google Fonts, and similar font comparison sites turned out to be fairly misleading because they present fonts at the same font size (em in LaTeX and CSS). The problem is that 1em is the size of a bounding box for the largest character, which can be arbitrarily loose. The perceived size of typical English text is much more closely determined by the x-height (ex in LaTeX and CSS). 1ex is the height of the character x, which is pretty close to the height of other lowercase characters for most fonts.

typography-line-terms

So it makes a lot of sense to compare fonts at the same x-height, and this is what I first did for a number of LaTeX fonts: fonts-by-x-height.pdf. On the other hand, normalizing for x-height can make fonts with wider glyphs look much bigger in the eye of the beholder. Thus, the obvious alternative is to normalize the space usage. Unfortunately, there is no convenient statistic available for this, so we have to resort to estimating the area required to set a given piece of reference text with a given font. The advantage of this method is that it takes kerning into account, the disadvantage is that we must now choose the line height, which is quite an art in itself. Based on the assumption that the amount visual separation between lines is the main factor that determines the difficulty of scanning lines, here I decided to keep the ratio of line height and x-height constant. Of course, other factors such as cap height, ascenders, and descenders also matter in general, but for the fonts considered, they didn't vary strongly enough in addition to x-height to make them change the results: fonts-by-space.pdf. Have a look and decide for yourself which fonts look best. To me, the most legible fonts are:

My taste is apparently quite similar to Lino Ferreira's. EB Garamond is a personal favourite, but it is just a bit too quirky for body text. Those same quirks make it great at larger sizes though, and this blog uses it for headings in addition to XCharter for the body text.

The messy LaTeX sources of the above documents are available on github.

Comment on Twitter or Mastodon.

end-of-post