# 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.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://university.obvious.in/product-design/typography/how-to-pair-typefaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.