Choosing and Pairing Typefaces

The question designers are most often asked about typefaces is: what are your favorites? It is a reasonable question, and not entirely without use — experienced designers develop informed preferences, and those preferences are worth knowing about. But it is the wrong question to ask first. The first question is always: what does this document need? A typeface that is perfect for a literary essay is wrong for a technical manual. A face that sings on a book cover is often a disaster in body text. Typeface choice is always a response to a specific set of conditions, and the conditions come before the preferences.

This chapter gives you a framework for making those choices well — a set of criteria for evaluating text typefaces, a vocabulary for thinking about display type, and a set of principles for pairing typefaces that contrast effectively without conflicting. At the end of the chapter, we choose the typefaces for The Compositor's Garden, and the project document begins to find its voice.

Criteria for selecting a text typeface What to look for, in order

Text type — the typeface used for body text, the paragraphs that make up the main content of a document — is the most important typographic decision you will make. It will be the face the reader spends most of their time with. It will determine the texture and color of every page. It will set the register and personality of the entire document. And yet it must, paradoxically, be nearly invisible — because good body type does not announce itself. It simply makes the text easy and pleasant to read.

The criteria for selecting a text typeface, in rough order of importance, are as follows.

Display vs. text type Two different jobs, two different standards

The distinction between text type and display type is one of the most important in typography, and it is one that the web has made somewhat harder to see clearly. On the web, the same typeface file is used at every size — from a 12px caption to a 96px hero headline. In traditional type foundry work, a typeface designed for text was physically different from one designed for display, because the optical requirements of small and large sizes are genuinely different.

At text sizes, legibility is the paramount concern. Letters need generous counters, open apertures, moderate contrast, and careful spacing. The details of the individual letterforms are largely invisible — what matters is the texture they produce in aggregate. At display sizes, legibility is usually not a problem — the letters are large enough to be read easily regardless. What matters at display size is the quality and character of the individual letterforms: the elegance of the curves, the sophistication of the spacing, the beauty of specific letter combinations. A typeface that looks merely acceptable at body size can be stunning at display size, and vice versa.

This has a practical implication for typeface pairing: the standards you apply to a display face are different from those you apply to a text face. A display face can have extreme stroke contrast, very tight spacing, unusual letterforms, or strong personality — things that would make it illegible or exhausting in body text, but that make it vivid and distinctive at headline scale. Don't reject a display face because it would make poor body text. That is not what it is for.

Some typeface families are designed to work at both sizes — they are called optical size families, and they include separate cuts of the typeface optimized for different size ranges. Source Serif 4, for example, includes optical size variants from caption size to display size, with different stroke contrast, spacing, and detail at each level. When a typeface offers optical size variants, using them — specifying the appropriate variant for body text and headlines respectively — produces noticeably better results than using a single cut at all sizes.¹

Pairing logic Contrast without conflict

Most documents use more than one typeface. At minimum, a book or report will have a text face for the body and some treatment for headings — which may be the same face in a different weight, or a different face entirely. The question of how to combine typefaces is one that intimidates many designers, and it need not. Pairing typefaces well follows a clear logic, and that logic can be learned.

The governing principle is the one we keep returning to: contrast without conflict. Two typefaces in a document should be different enough to be clearly distinct — to signal that they are playing different roles — but not so different that they fight each other, each asserting its own personality so strongly that the document loses coherence. The goal is a conversation, not a competition.

There are several reliable strategies for achieving this.

Pair within a superfamily. Many type designers produce extended families that include both a serif and a sans-serif sharing the same underlying proportions and visual DNA. Pairing within a superfamily is the easiest approach — compatibility is designed in. Lucida Serif and Lucida Sans, Freight Text and Freight Sans, Source Serif and Source Sans are examples. The result is coherent almost by definition.

Pair typefaces with shared ancestry. Many typefaces are designed in the tradition of historical models, and faces that share a common ancestor tend to pair well even when they are not explicitly related. An Old Style text face pairs naturally with a sans-serif that has humanist proportions, because both are rooted in the same calligraphic tradition. The shared proportions — similar x-heights, similar overall weight — create visual harmony even when the details differ.

Contrast across the serif/sans-serif divide. The most common and most reliable pairing strategy is to use a serif for body text and a sans-serif for headings and labels, or vice versa. The categorical difference between serif and sans-serif is large enough that the two faces read as clearly distinct, while the contrast itself creates no visual conflict — it simply marks a difference in function. Within this approach, the key is to ensure the two faces are compatible in weight and proportion: a very heavy, condensed sans-serif will not pair gracefully with a light, wide-spaced serif.

Avoid pairing faces from the same classification without a strong reason. Two serif faces, two sans-serifs, or two faces of similar historical period will rarely produce enough contrast to read as a deliberate pairing. They will more often look like a mistake — as though you couldn't decide which one to use. If you want to use only one classification, the solution is almost always to use only one typeface and distinguish levels of hierarchy through weight, size, and style rather than through a different face.²

Practical pairing with web fonts Sources, loading, and making good choices quickly

The advice above applies to typefaces in general. In practice, most documents produced with HTML and Paged.js will use web fonts — typefaces loaded from Google Fonts, Adobe Fonts, or a self-hosted source — and the practical considerations of web fonts shape the choices available to you.

Google Fonts is the most accessible source and, increasingly, one of the best. Its library has grown considerably in quality over the last decade, and it now includes serious text typefaces — EB Garamond, Source Serif 4, Lora, Merriweather, Libre Baskerville — that are genuinely suitable for book and document work. The SIL Open Font License that covers all Google Fonts permits web use and PDF embedding, which is exactly what Paged.js requires. For most documents, Google Fonts is the right place to start.

When loading web fonts in a Paged.js document, there is an important practical detail: Paged.js begins paginating the document as soon as it runs, and if the fonts have not finished loading at that point, the pagination will be calculated using fallback fonts, producing incorrect line breaks and page counts. The solution is to ensure fonts are fully loaded before Paged.js runs. The most reliable method is to use the document.fonts.ready promise, which resolves when all fonts referenced in the CSS have loaded:

// Ensure fonts load before Paged.js paginates
document.fonts.ready.then(() => {
  // Paged.js will auto-run, or call PagedPolyfill.preview()
  // if using the manual API
});

When specifying font weights and styles in your @font-face declarations or Google Fonts URL, only request the weights you will actually use. Loading a full variable font or all available weights introduces unnecessary network overhead and can slow the loading time enough to cause the pagination problem described above. For most documents, requesting regular (400), italic (400i), and medium or semibold (500 or 600) is sufficient.

For print-only documents where network access is not guaranteed — or for documents that will be run through a command-line Paged.js build pipeline — self-hosting your font files is the more reliable approach. Download the font files from Google Fonts (the google-webfonts-helper tool makes this straightforward), host them alongside your HTML, and reference them with @font-face declarations. This eliminates any dependency on external servers and ensures consistent output regardless of network conditions.³

<!-- In <head> -->
<link rel="preconnect"
  href="https://fonts.googleapis.com">
<link rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin>
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?
    family=EB+Garamond:ital,wght@
      0,400;0,500;1,400
    &family=Outfit:wght@
      400;500
    &display=swap">

/* In CSS */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/eb-garamond-400.woff2')
       format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/eb-garamond-400i.woff2')
       format('woff2');
}

The project typefaces Choosing for The Compositor's Garden

With the criteria and strategies in place, we can now make the typeface decisions for the project document. These choices will stay with The Compositor's Garden for the rest of the book, so they deserve a moment's thought rather than a hasty decision.

The document is a short literary book of essays — warm, personal, essayistic, with a slightly antiquarian sensibility. The fictional author is a former typographer who writes about craft and attention. The content calls for a typeface with humanist warmth, good legibility at text sizes, and enough character to feel considered without feeling decorative. An Old Style serif is the natural choice for the body.

For body text: EB Garamond, designed by Georg Duffner as a revival of the sixteenth-century typefaces of Claude Garamond. It has the oblique stress, moderate contrast, and bracketed serifs characteristic of Old Style faces, with a warmth and texture well suited to literary prose. Its x-height is moderate — classical rather than contemporary — which suits the register of the content. Its character set is complete, its italic is a genuine italic with distinct letterforms, and it is available under the SIL Open Font License. At 11–12pt with generous leading, it produces exactly the texture a literary book should have.

For headings and labels: Outfit, a geometric sans-serif with a clean, contemporary quality that contrasts clearly with Garamond's warmth without fighting it. Used in light or regular weight at a small size for labels and captions, and in regular weight at a moderate size for running headers and navigation elements, it provides the functional clarity that the structural elements of the document need without asserting a personality of its own. The contrast between Garamond's calligraphic warmth and Outfit's geometric precision is deliberate and wide enough to read as intentional.

These are not the only choices that would work. Source Serif 4 in its caption optical size would make an excellent alternative body face. Cormorant Garamond would give the document a more refined, high-contrast character. Inter or Source Sans would be equally good alternatives to Outfit. But the combination of EB Garamond and Outfit has been tested throughout this book — you have been reading it — and it works. That is the most reliable endorsement available.

The typefaces are chosen. The document has its voice. What it does not yet have is its scale — the system of sizes and proportions that will govern every typographic decision from here forward. That is the subject of Chapter 8: the type scale, and how to build one that gives your document coherence from the smallest caption to the largest headline.