Learning on Web Dev Open is free for all.

Design Craft > Type carries itPairing without a mood board
Phase 02Type carries it90 of 434

Pairing without a mood board

Two faces maximum, contrasting rather than similar, and one of them can usually be the system stack without anybody noticing.

Concept13 minAI pair

The reliable pairing rule is contrast: a serif with a sans, a display face with a workhorse, high contrast with low. Two sans-serifs from the same era and the same width read as a mistake rather than a decision, because the eye registers the difference without being able to justify it.

Match x-height across the pair, or one face will look larger than the other at the same size, and you will spend the rest of the project applying corrective font-size values per component. Check the numerals too: lining versus old-style is the detail that quietly makes a table look wrong.

One face used well beats two used carelessly, and a variable font with a real weight range often removes the need for a second entirely. The system stack is also a legitimate choice for body text: it is free, it never flashes, and on a product interface almost nobody notices.

You should now be able to

  • Choose a pair that contrasts on structure, not just shape
  • Decide when one typeface is the right answer
  • Match x-height and weight across a pairing
Ask the community

Loading…