Choosing a type pairing

Why pair at all

One well chosen family with several weights can carry an entire product, and for many interfaces that is the right answer. Pairing becomes useful when a site needs two distinct voices: an expressive face for headlines and a quiet, highly legible face for long reading. Editorial sites, portfolios and brand-led marketing pages often benefit.

Contrast in role

The two faces should be clearly different, so that the difference reads as intentional. Two similar sans-serifs side by side look like a mistake. Common contrasting pairs include:

• A serif headline with a sans-serif body.
• A geometric display sans with a humanist text sans.
• A condensed headline face with a regular-width body face.

Agreement in spirit

Contrast alone is not enough. The two faces should share something: similar proportions, a similar x-height, a related historical period, or a shared mood. A playful rounded display face beside a severe, formal serif tends to argue.

A practical check is to compare the lowercase letters a, e, g and o side by side at the same size. If their proportions and apertures feel related, the pair is likely to work.

Superfamilies

Some type families include both serif and sans-serif designs drawn by the same designer on the same underlying skeleton. These superfamilies guarantee harmony and are an easy way to get a pairing that works without much experimentation.

Test with real content

Set an actual page: a headline, a subheading, two paragraphs of body text, a caption, a button. Pairings that look elegant in a specimen with a single word often behave differently in a dense layout. Check the bold and italic of the body face too, since they appear constantly in real content.

Mind the performance cost

Each family is another set of files to download. Two families with three weights each can easily mean six font files. Limit the weights you actually use, subset where possible, and consider using a system font stack for the body text if the display face carries the brand.

Establish the scale

Once the pair is chosen, define a type scale: a set of sizes with consistent ratios between them. Assign each size a face, weight and line height. Designers and developers then choose from the scale rather than inventing sizes, and the pairing stays consistent across every page.

When in doubt, use one

If no pairing feels right after a few attempts, a single versatile family with a strong range of weights will rarely let you down. Clarity beats variety.