This article focusses mainly on pairing by classification. Here are a few other things to consider when pairing fonts:

X-height: This is the height of the lowercase "x" glyph. You will notice that there is an imaginary line around where many lowercase letters line up at. This usually falls around the crossbar of an uppercase "A" and "H". Finding fonts with similar x-heights helps make a nice match.

Glyph width: Finding fonts with very similar widths or very contrasting widths is also something to consider. If they are somewhere in between, it sometimes feels weird.

Taking these attributes into consideration, in addition to their Era/Classification/Style really help in pairing fonts.

I was always taught to use X-height, personally. It's a very reliable means for sans serif.

This article starts off well, but quickly makes various oversimplifications, such as:

> This is because it’s rare for sans-serif and slab-serifs to exhibit any difference in the stroke.

Uhh, sure they are rare, as long as you ignore industries where contrasting stroke sans-serifs are the norm in their marketing materials, like cosmetics: https://fontsinuse.com/uses/9689/estee-lauder-websites

For that matter, this is just an extension of the Humanist sans-serif category.

Other important subcategories elided are the Latin (or Wedge) serifs and Flared serifs.

I guess this article assumes you know how to pick a single typeface.

Hoefler & Co does a great job of demonstrating their techniques for pairing fonts. (albeit a bit non web app biased) https://www.typography.com/techniques/

That grid is 3X3 not 9X9

Also, it could easily be reduced to 2x3. Designers.. sigh

Keep in mind that serif typefaces do not always render pleasingly to the eye as they need more pixels to render correctly. These pixels are needed to render the subtle serifs. Monospace and sans typefaces suffer a lot less from this problem.

It is one of the reasons I never advise to use serif fonts for text body. Nowadays, betterresolutions are used more often, but low res displays are still common enough.

Serifs for bulk content work just fine for NYT and many others.

Perhaps you should switch to not advising to use serif fonts _in smaller sizes_ for text body.

As stated in the second paragraph, this is "simple method to pair typefaces." Traditional typefaces have complex extant cultural connotations. Some of these are nationalistic. Rules of thumb regarding shapes are useful, but you combine letterforms outside their historical context and previous application at your peril.

That looks like a 3x3 grid though. Is there an implied 3x3 grid in each of the cells?