> For the complete documentation index, see [llms.txt](https://university.obvious.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://university.obvious.in/product-design/typography/how-to-pair-typefaces.md).

# How to pair typefaces

## 👋 Introduction 

Some products use more than one typeface. This module tells you what to keep in mind when pairing typefaces.

***

## 1️⃣ Pairing Typefaces

### 1️⃣ Pair fonts with different characteristics for visual interest

Use fonts with different weights, styles, or serif/sans-serif variations.

<figure><img src="/files/zj6xirhLQNgDM1NHQ4z2" alt=""><figcaption></figcaption></figure>

> Make sure to choose fonts with noticeable differences in style, weight, or structure in order to avoid a lack of distinction. For example, avoid pairing serif with serif.

### 2️⃣ Use distinct font styles to establish visual order

Use decorative or elaborate fonts for headings or titles, and more straightforward, readable fonts for body text.

<figure><img src="/files/zIfRoLczur7pCrjAl42U" alt=""><figcaption></figcaption></figure>

> Avoid using fonts with conflicting styles that create dissonance. For example, pairing an elegant script font with a heavy, blocky font may result in jarring contrast.

### 3️⃣ Pair fonts that complement each other in tone or mood

A modern sans-serif font may pair well with a clean, geometric serif font.

<figure><img src="/files/rnntd4rUbaGWYXySpWMa" alt=""><figcaption></figcaption></figure>

> Be cautious about pairing fonts that convey conflicting moods or aesthetics. For instance, pairing a playful, whimsical font with a formal, business-oriented font may result in a mismatched design.

### 4️⃣ Prioritise readability when pairing fonts, especially for longer text

Ensure the combination can be easily read at different sizes and across devices.

<figure><img src="/files/Hod6FrX3bXcDjnR0Sibk" alt=""><figcaption></figcaption></figure>

> Mixing fonts can add depth and interest, enhancing a design's overall aesthetic. But you must ensure that the typeface you choose for the body text is readable.

### 5️⃣ Limit the number of fonts to maintain consistency and avoid visual clutter

Two or three fonts are usually sufficient for most projects.

<figure><img src="/files/gCK90tHFvPgAebgZ94g5" alt=""><figcaption></figcaption></figure>

> Test your font combination at various sizes and consider how it will appear on different devices or mediums to avoid poor scaling.

***