Font pairing selects typefaces that work together to create a clear typographic system. Effective pairs establish hierarchy, guide attention, and communicate a brand’s tone. section 8.2.2
Use contrast and shared design qualities to build a pairing:
- Pair typefaces from one superfamily, such as Roboto Slab for headlines and Roboto for body copy. section 8.2.2
- Create contrast within one family by combining noticeably different weights, such as Fira Sans Regular 400 with Extra-Bold 800. section 8.2.2
- Combine categories such as serif, sans serif, decorative, or script, while keeping the intended mood consistent. section 8.2.2 section 8.3
- Avoid pairs that are too similar in size, weight, or lettering style, because they weaken hierarchy and clarity. section 8.2.2
A clear web hierarchy
Use Roboto Slab in a bold weight for headlines and Roboto for body copy. The shared design keeps the system cohesive, while the category and weight contrast separates headings from reading content. section 8.2.2
Figure 8.13 Roboto Slab and Roboto are two typefaces from the same superfamily, Roboto, and pair well together.
Compare Roboto Slab and Roboto as a superfamily pairing with related forms but distinct headline and body roles. section 8.2.2
