# How to pair typefaces

## 👋 Introduction&#x20;

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="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FTXcUkXRaqadE6PHqSONp%2Fimage.png?alt=media&#x26;token=75cee61f-63ec-4d5d-8a7b-cf9b8567c5db" 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="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FhomwDpCKhHk5fOpac41E%2Fimage.png?alt=media&#x26;token=b429ebf7-4ea4-4b1e-a64d-711371c3a48d" 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="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2F2iC0cdSU3ZtGHSkPpd9A%2Fimage.png?alt=media&#x26;token=3978c946-cbe8-4543-a750-15ffd98c4339" 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="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FWDo1YAySyZJzMHuA4RO0%2Fimage.png?alt=media&#x26;token=3d320985-4561-4329-ab1b-d64ed0aee49a" 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="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FlV77E0pfyx2hv2kzf4KV%2Fimage.png?alt=media&#x26;token=e0722117-7982-49df-a43e-d7e2b8b7e308" 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.

***
