Books UI Typography Basis

Pairing fonts

The combination of several fonts in a design helps make it extraordinarily expressive and create a unique impression of typography. From a practical point of view, the pairing fonts make it possible to better separate the primary from the secondary, which means you can subtly control the user's attention.

There are several techniques for pairing fonts, such as typeface shapes, similar proportions in the size, ratios of lowercase to uppercase, similar letter design, etc.

It's a bit complicated and requires a special understanding of font anatomy and typography. So the risk of making a mistake when choosing different typefaces for the heading and body text is very high.

I suggest a slightly more straightforward and rational approach. Usually, different fonts are chosen for body text and headings. And it is almost always done for one purpose: to increase the contrast between them. The contrast is what makes the design attractive and remarkable.

So the only technique you need is contrast. From this you can achieve a result with a minimum of risk.

Sans for headings and serif for body

Sans font for headings and serif for body text almost always gives a good contrast. Especially if sans has a great boldness and this contrast makes a beautiful combination.

Lexend for heading + Noto Serif for body text.

Serif for headings and sans for body

Serif for headings and sans typeface for body text also gives good contrast. As a rule, using both fonts from the same family will be a balanced and effective combination.

Noto Serif for heading + Noto Sans for body text.

Slab for headings and sans for body

Slab font for headings and sans for body text creates a unique combination. It is incredibly expressive typography and great accents for better scaning text in titles.

Roboto Slab for heading + Inter for body text.

Keep it simple

If you doubt it, make one font for both headings and body text. It's the simplest and most accurate solution. After all, you can achieve the contrast and appeal of typography in other ways: colors, hierarchy, weight, and various others.

Inter for heading and body text.

A good proportion of heading and text gives good contrast if even you use the same font for everything.



Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors