Beyond Gut Feeling: The Mathematical Science of Font Harmony

Links Around the Web
1

We’ve all been there—spending hours on Google Fonts, trying endless combinations, only to default to Roboto, Poppins, Inter, or Montserrat.

But what if font pairing wasn’t just about aesthetics, but science?

Typography follows mathematical principles that can help you predict which fonts will work best together. Understanding x-height ratios, character width, and rhythm can take your designs to the next level.

Learn the science behind font pairing and make more confident design choices:

2 Likes
2

I will say it was better than I thought. It does talk about a lot of useful global properties of typefaces. However, in the context of typeface pairing and usage, it is vastly too oversimplified to be useful.

This particular framework is only really useful if you’re going to literally set two fonts in the same line. If you’re going to use different fonts in different places, you’d be surprised how much you can get away with in terms of choosing different fonts. (And the article does at least acknowledge you want to select certain properties to be intentionally different.)

Some tidbits to highlight how oversimplified the article is:

  • If each element of your content hierarchy is a different font size, x-height ratio literally doesn’t matter, in fact in many type families with optical sizes, the x-height even changes.
  • In many typefaces, the x-height increases with weight as an optical compensation, even if the size stays the same.
  • Stroke contrast should decrease as the font size gets smaller, a trait that serif families with optical sizes exhibit.
  • Stylistic compatibility can look like many things. Fonts can exhibit many different characteristics that are far too much to properly quantify, like the way joins are treated, squareness of curves, rotation of contrast, key details in certain characters (does the a have a tail? is the g double-storey? does the y have a tail?), etc. These small details can be enough to make a typeface pairing feel harmonized.

Also two things that are worth pointing out:

  1. Verdana and Georgia were designed around the same time, both by Matthew Carter and commissioned by Microsoft as a pair of sans and sans-serif fonts both optimized for screens. That’s why they’re similar.
  2. I don’t think the baseline shift is necessary or even a good idea. You want a consistent baseline if you’re setting them in the same line, and if they’re in separate places of the page then the baseline shift doesn’t even matter anyway.

In my personal belief, the absolutely most essential resource in font pairing is Bethany Heck’s talk on multi-typeface design. Her Medium post is locked behind a paywall since I last read it, but you can still watch the talk (which goes into even more detail). If you don’t have the time to watch an hour-long talk, skip to the 53:51 mark for the summary.

1 Like