Typeface pairing

Pairs that look kind-of-the-same-but-not-quite are the worst. Either harmonise or contrast. > Consistency is one of the forms of beauty. Contrast is another., Robert Bringhurst ## The two-typeface rule **Use no more than two typefaces.** One for body, one for display. - **Performance.** Each face is a network request. - **Forced hierarchy.** Weight, size, or colour has to do the work. - **Lower risk.** Two faces have one relationship. Three have three. Four have six. ## Stress and skeleton: the diagnostic **Stress** is the angle of the thinnest part of a curved letter. **Skeleton** is the underlying structure. These predict whether two faces will pair. - **Diagonal stress (humanist)**: Old-style serifs (Garamond, Caslon) and humanist sans-serifs (Gill Sans, Frutiger). - **Vertical stress (rational)**: Modern serifs (Bodoni, Didot) and geometric sans-serifs (Futura, Avenir). ## The reliable pairings Match stress angles: - **Old-style serif + humanist sans.** Garamond + Gill Sans. Caslon + Frutiger. Classic. - **Modern serif + geometric sans.** Bodoni + Futura. Didot + Avenir. Fashion and luxury. - **Transitional serif + grotesque.** Baskerville + Franklin Gothic. Times + Trade Gothic. Newspaper feel. - **Neo-grotesque + slab serif.** Helvetica + Rockwell. Inter + Clarendon. Contemporary. ## The superfamily shortcut A **superfamily** includes serif and sans-serif variants from the same designer. - **Source Serif Pro + Source Sans Pro.** Open-source workhorse. - **FF Meta + FF Meta Serif.** Spiekermann's humanist pair. - **Freight Text + Freight Sans.** Editorial and versatile. - **Calluna + Calluna Sans.** Jos Buivenga's balance. - **FF Scala + FF Scala Sans.** Martin Majoor's classic. Eliminates stress mismatch and x-height disagreement in one choice. ## What to avoid - **Two sans-serifs from the same genre.** Helvetica + Arial: near-identical, no contrast. - **Two serifs from different eras.** Bodoni + Garamond: vertical stress against diagonal. - **Geometric sans + old-style serif.** Futura + Garamond. - **Too many faces.** Each new face multiplies relationships that can go wrong. ## Pairing by designer Eric Gill drew Perpetua and Gill Sans. Hermann Zapf drew Palatino and Optima. Each pair shares a sensibility that creates coherence without similarity. ## Choosing faces for UI For UI (buttons, labels, navigation, forms), pick faces with distinct `l`, `I`, and `1` glyphs. Use condensed faces for headlines when space is tight. Avoid condensed for body.