Font Pairing

Font pairing is the practice of selecting two or three typefaces that work together visually — usually a serif or display font for headings and a sans-serif for body text. A good pairing feels intentional and coherent; a bad one feels accidental or muddled.

In a Design System, font pairing is a foundation decision that shapes the entire visual voice. Most systems use one or two font families:

Two-family approach: One for headings (often distinctive, maybe serif), one for body (usually highly readable sans-serif). Gives contrast and personality.
Single-family approach: One variable font or well-designed family with enough weight variation to do both jobs. Simpler, more cohesive, less HTTP overhead.

The principles of pairing:

Contrast: If both fonts are modern sans-serifs, they need different visual weight or character width to read as paired. If one is serif and one is sans-serif, the contrast is automatic.
Readability: Body text needs high legibility at small sizes. A decorative font is fine for headings but will tire eyes at body size.
Personality match: A geometric sans-serif (friendly) paired with a traditional serif (formal) can feel discordant. Personality should align.
Weight variation: A good font family provides enough weights that you can create hierarchy without switching families.

In practice, most Design Systems use one or two well-chosen families (often variable fonts like Inter or Roboto Flex) that handle all contexts. The pairing is less about switching fonts and more about using the same family's weights and styles strategically.

The Design System usually stores font family as a design token — font-family-heading, font-family-body — even if they're the same font. This makes theming and rebrand easier.

Related: Type ramp · Fluid typography · Typography scale · Foundations · Design tokens