The Type Scale

Open any well-designed book and compare the sizes of its typographic elements — the body text, the captions, the subheadings, the chapter titles. You will find that those sizes are not arbitrary. They are related to each other by proportion: the headline is roughly twice the body size, the caption is roughly three-quarters, the subheading falls somewhere between the two. These relationships are rarely accidental. They reflect a type scale — a system of sizes derived from a consistent ratio — and it is this proportional consistency that gives a well-typeset document its sense of visual order.

Without a scale, typographic sizing is guesswork. You adjust sizes case by case, each decision made in isolation, and the result is a document that may look acceptable in parts but lacks coherence as a whole. The sizes are neither clearly the same nor clearly different; they just are what they are. With a scale, every size decision is an answer to the same question: where does this element fall in a system that is consistent throughout?

This chapter explains how type scales work, how to construct one, and how to implement it in CSS in a way that makes the system both visible and easy to maintain.

· · ·

Proportional systems Why ratio matters more than size

A type scale is built around a ratio — a number that describes the relationship between consecutive steps. Start with a base size, multiply by the ratio to get the next size up, multiply again to get the one above that. Divide by the ratio to get smaller sizes. Every step is proportionally related to every other step, and the whole system feels coherent because it is built on a single underlying relationship.

The most commonly used ratios in typography have been borrowed from music theory and classical geometry, because the same proportions that produce harmonious intervals in sound produce harmonious relationships in space. A ratio of 1.5, the perfect fifth in music, produces a scale that feels spacious and unhurried. A ratio of 1.333, the perfect fourth, produces a tighter, more compact scale. A ratio of 1.618, the golden section, sits between them — generous but not sprawling. For practical document typography, ratios between 1.2 and 1.618 cover most useful scenarios.¹

The choice of ratio depends on how many distinct levels of hierarchy your document requires, and how much visual separation you want between them. A document with only three or four typographic levels — body, subheading, heading, and perhaps a display size — can use a larger ratio, because you need strong contrast between relatively few steps. A document with six or seven levels needs a smaller ratio, because a large ratio would produce extremes at the top and bottom of the scale that are too far apart to work together gracefully.

For most document work — books, reports, academic papers — a ratio between 1.25 and 1.414 produces a usable scale with five to seven steps. The scale used throughout this book is built on a ratio of approximately 1.3, producing steps from a small caption size through to a chapter title, with the body text anchoring the middle of the range.

· · ·

Building a scale in CSS Custom properties and the rem unit

The most effective way to implement a type scale in CSS is with custom properties — CSS variables — defined at the :root level. This approach makes the scale explicit, readable, and easy to adjust: all size relationships are visible in one place, and changing the base size or the ratio propagates through the entire document automatically.

The foundation is a base font size set on the html element, and a set of named scale steps defined as rem values. The rem unit — root em — is always relative to the base font size of the document, not to the size of the parent element. This makes it predictable in a way that em is not: a rem value means the same thing wherever it appears in the document, which is exactly what you want for a consistent scale.²

Here is the scale used for this book, implemented as CSS custom properties:

/* ── Base size ─────────────────────────────── */
html {
  font-size: 16px; /* 1rem = 16px throughout */
}

/* ── Type scale — ratio ≈ 1.3 ──────────────── */
:root {
  /* Below base */
  --text-xs:    0.72rem;   /* 11.5px — footnotes, small labels */
  --text-sm:    0.85rem;   /* 13.6px — captions, secondary text */

  /* Base */
  --text-base:  1.175rem;  /* 18.8px — body text */

  /* Above base */
  --text-md:    1.32rem;   /* 21.1px — lead paragraphs, intro text */
  --text-lg:    1.65rem;   /* 26.4px — subheadings */
  --text-xl:    2rem;      /* 32px   — section headings */
  --text-2xl:   2.8rem;    /* 44.8px — chapter titles */
  --text-3xl:   3.75rem;   /* 60px   — display / part titles */
}

With this in place, every typographic element references a named scale step rather than a hardcoded size. A caption uses font-size: var(--text-sm). A chapter title uses font-size: var(--text-2xl). The names make the hierarchy legible directly in the CSS, and if you decide to adjust the scale — shifting the base size larger for a different trim, or compressing the steps for a more compact document — you change the values in one place and the whole document responds.

· · ·

Applying the scale consistently A single source of truth for every size decision

Defining a scale is only half the work. The other half is discipline: using the scale for every size decision in the document, and never introducing an ad-hoc size outside of it. This discipline is what produces coherence. A document where every element references a named scale step feels resolved and considered. A document where some elements use scale steps and others use arbitrary values — a subheading at 1.4rem, a caption at 11px, a running header at 0.68rem — feels inconsistent at a level the reader cannot name but feels immediately.

In practice, this means your CSS should contain no font-size declarations with hardcoded values, only references to scale custom properties. Every element that needs a size gets it from the scale. If no scale step fits precisely, you either adjust the scale or reconsider whether the element genuinely needs a distinct size — often it does not, and assigning it the nearest scale step is the better solution.

The only legitimate reason to use a size outside the scale is a deliberate, considered exception — a specific element that genuinely needs to fall between two steps, or a one-off display element whose size is determined by context rather than hierarchy. These exceptions should be rare, should be commented in the CSS, and should feel slightly uncomfortable to make. If they feel comfortable, the discipline has slipped.

Here is how the scale maps to the typographic elements of The Compositor's Garden:

/* ── Document elements — scale assignments ─── */

/* Display / part opener */
.part-title     { font-size: var(--text-3xl); }

/* Chapter opener */
.chapter-title  { font-size: var(--text-2xl); }
.chapter-intro  { font-size: var(--text-md);  }

/* Body headings */
h2              { font-size: var(--text-lg);  }

/* Body text */
body, p         { font-size: var(--text-base); }

/* Supporting elements */
figcaption      { font-size: var(--text-sm);  }
.footnote       { font-size: var(--text-sm);  }

/* Navigation / labels */
.running-head   { font-size: var(--text-xs);  }
.folio          { font-size: var(--text-xs);  }
.chapter-label  { font-size: var(--text-xs);  }

· · ·

Adjusting the scale for print From pixels to points

The scale described above is defined in rem units relative to a 16px base, which works well for screen display and Paged.js browser preview. For print output — the final PDF — you may want to convert the sizes to points, which are the conventional unit for print typography. One point is 1/72 of an inch; at standard screen resolution, 1 point ≈ 1.33 pixels.

The simplest approach is to change the base font size on the html element to a point value within a @page context, and let the rem-based scale adjust proportionally. Setting font-size: 10pt on the html element means that 1rem = 10pt, and your scale steps become: 0.72rem = 7.2pt, 1.175rem = 11.75pt, 1.65rem = 16.5pt, and so on — all proportionally correct and expressed in the conventional units of print typography.

/* ── Print-specific base size ───────────────── */
@media print {
  html {
    font-size: 10pt; /* 1rem = 10pt for print */
  }
}

/* ── Within Paged.js ────────────────────────── */
/* The scale custom properties remain unchanged.  */
/* Only the base changes — all steps scale with it */

/* Result at 10pt base:                          */
/* --text-base:  1.175rem = 11.75pt (body)       */
/* --text-lg:    1.65rem  = 16.5pt  (subhead)    */
/* --text-2xl:   2.8rem   = 28pt    (ch. title)  */
/* --text-xs:    0.72rem  = 7.2pt   (labels)     */

This single change — adjusting the base and leaving everything else untouched — is the practical value of building the scale on rem units rather than fixed values. The proportional relationships are preserved exactly; only the absolute sizes shift to suit the output medium.

· · ·

Breaking the scale intentionally When and how to deviate

A type scale is a tool, not a rule. There will be moments in any document where the scale does not produce the size you need — where the next step is too large and the step below it too small, or where a specific display element requires a size determined by compositional factors rather than hierarchical position. These moments are legitimate, and handling them well is part of typographic judgment.

The key is to break the scale with intention and restraint. An intentional break is one where you have asked whether any scale step could serve the purpose, concluded that none of them can, and chosen a specific value for a specific reason you could articulate. A careless break is one where you simply tried a few numbers until something looked right without engaging the question at all.

The most common legitimate reasons to break the scale are: a drop cap whose size is determined by the number of lines it should span, not by its hierarchical position; a large display numeral on a chapter opener whose size is constrained by the page geometry; a pullquote set at a size calculated to produce a specific number of characters per line. In each case, the size is responding to a constraint outside the typographic hierarchy. In each case, the deviation should be commented in the CSS.

The most common illegitimate reason is comfort with round numbers. A designer reaches for 24px because it is a satisfying number, when var(--text-lg) at 26.4px would have served just as well and maintained the scale. Round-number comfort is the enemy of systematic thinking. If your scale step is close to what you want, use the scale step.

· · ·

The type scale is the backbone of the typographic system — the thing that makes every size decision part of a coherent whole rather than an isolated choice. With it in place, we move to the next layer of the system: vertical spacing. Chapter 9 covers line-height, paragraph spacing, letter-spacing, and word-spacing — the distances between things, which are as important as the things themselves.