Spacing and Rhythm

There is a passage in Eleanor Voss's second essay, "On Spacing," that describes her teacher standing at the compositing stone and saying: "You see letters. You're not looking at the spaces yet. Come back when you can see the spaces." It took her months to understand what he meant. Then one morning she did, and everything changed. This chapter is about learning to see the spaces — all of them, at every scale, in every dimension. Between letters. Between words. Between lines. Between paragraphs. Between sections. The space is not the gap left over after the letters are placed. The space is part of the design, subject to the same care and intention as every other element on the page.

Spacing in typography has a vertical dimension and a horizontal one. Vertically: the space between lines (leading), between paragraphs, and between sections. Horizontally: the space between letters (tracking), between words, and the indentation that marks the beginning of a new paragraph. Each of these operates according to its own logic, and each must be tuned not in isolation but in relation to the others. The goal, across all of them, is the same: rhythm. A page with good spacing has a rhythm to it — a sense of measured, regular movement from line to line and section to section — that the reader feels as ease and comfort even without being able to name it.

Line-height and vertical rhythm The foundation of readable text

Line-height — the vertical distance from the baseline of one line of text to the baseline of the next — is the most significant spacing decision in typography. It determines whether text feels open or compressed, whether the eye can move smoothly from line to line, and whether the page has the comfortable gray texture that long-form reading requires. Set it too tight and the text feels airless; the eye loses its place returning from the end of one line to the beginning of the next. Set it too loose and the lines feel disconnected, each one an island in a sea of space.

The correct line-height for body text is not a fixed value. It depends on three interacting factors: the type size, the line length, and the x-height of the typeface. Larger type needs proportionally less leading — a 24pt headline that needs 1.8 line-height would look absurd. Longer lines need more leading — the eye needs more space between lines when it has further to travel across each one. Typefaces with large x-heights need more leading than those with small x-heights, because the tall lowercase letters fill more of the line space and leave less visual breathing room between lines.

For body text in a book or document, a line-height between 1.4 and 1.8 covers the useful range, with most well-designed body text falling between 1.5 and 1.75. In CSS, line-height is one of the rare properties where a unitless value — line-height: 1.6 rather than line-height: 1.6em or line-height: 1.6rem — is the correct approach. A unitless value scales with the font size of the element it is applied to, whereas a fixed unit freezes the leading at a specific measurement that may become inappropriate when the type size changes.¹

The concept of vertical rhythm extends line-height to the full page. If the body text has a line-height that produces a baseline grid — say, 18px per line at 12px type with 1.5 line-height — then ideally every other vertical spacing decision in the document is a multiple of that 18px unit. Headings, paragraph gaps, section breaks, image placements — all snapping to the same underlying grid, so that the baseline of every line of text on the page, regardless of size, aligns to a common vertical structure. This alignment, when achieved, gives the page a quiet regularity that is visible in the even distribution of text across it.

In practice, strict baseline grid alignment in CSS is difficult to maintain — it requires careful calculation of every heading's margin and padding, and falls apart easily when images or block elements of unpredictable size are introduced. A more pragmatic approach, and one that produces nearly equivalent results, is to establish a vertical rhythm unit (the leading of the body text) and use multiples of it for all vertical spacing rather than insisting on strict baseline alignment throughout.

Line-height for headings and display elements follows different rules. Large type set with body line-height looks absurd — the space between lines dwarfs the letters themselves. A general principle: as type size increases, line-height should decrease, often to values below 1.2 for very large display sizes. A chapter title at 44px might use a line-height of 1.05; a subheading at 26px might use 1.25. The goal in both cases is the same as for body text — lines that are clearly separated from each other but feel like they belong together — but the values needed to achieve it are quite different.

Letter-spacing and word-spacing The horizontal dimensions

Letter-spacing — the space added between all characters in a run of text, called tracking in traditional typography — is a tool that is frequently misused and rarely understood. The misuse takes two forms: adding tracking to body text to make it look more refined, and using tracking as a substitute for weight when creating emphasis. Both are mistakes, for the same reason: tracking is not a general-purpose spacing improvement. It is a specific tool with a specific application.

The application is this: tracking is appropriate for text set in all capitals or small capitals, and for very large display text. For text set in all capitals, tracking is not optional — it is required. Capital letters were designed to sit next to lowercase letters, and when set in sequences of all-capitals, they crowd together in a way that looks typographically crude and reduces legibility. Adding tracking to all-caps text — typically between 0.05em and 0.15em depending on the typeface and size — restores the visual spacing that the mixed-case context would have provided naturally.

For body text set in mixed case, tracking should generally be zero. Adding positive tracking to body text makes it look airy and open in isolation, but reduces the number of characters per line, disrupts the natural spacing relationships between letters, and — at normal reading distances — makes no perceptible improvement to legibility. The typeface designer has already set the optimal spacing for mixed-case text. The correct response is to trust it.

Word-spacing — the space between words — is the other horizontal variable, and it is even more constrained. Good word-spacing is invisible. The reader never thinks "the words are well spaced." They simply read. The moment word-spacing becomes visible — either too tight, so words run together, or too loose, so each word floats in isolation — reading becomes effortful and the spacing has failed. In CSS, word-spacing: normal is almost always correct for body text. The only common legitimate use of adjusted word-spacing is to compensate for a typeface with unusually tight or loose default spacing, which is relatively rare in well-made typefaces.²

Paragraph spacing vs. indentation Two methods, one purpose, different characters

Every paragraph needs to be visually distinguished from the paragraph before it — otherwise the reader has no way of knowing where one ends and the next begins. There are two methods for doing this, and they are not interchangeable. They have different histories, different characters, and different appropriate uses.

Paragraph indentation is the classical method. The first line of every paragraph except the first paragraph after a heading is indented — typically by one to two ems. No vertical space is added between paragraphs. The result is a dense, continuous text block that reads as a single sustained body of prose. This is the method used in virtually every printed book, and it is the correct choice for long-form reading matter where continuity of text is the primary goal. The indentation provides just enough signal to mark the paragraph break without interrupting the reading flow or introducing visual gaps in the text.

Paragraph spacing adds a vertical gap between paragraphs in place of indentation. It is the default behavior of HTML — browsers add a margin below each <p> element — and it is the method used in most web content, documentation, and business documents. It makes each paragraph visually distinct and self-contained, which suits content that may be skimmed or navigated non-linearly. The cost is a more interrupted reading experience and a page with more visual fragmentation.

The two methods should never be combined. A paragraph with both an indent and a space above it is using two signals where one is sufficient, and the result looks indecisive. The rule is simple: choose indentation for literary and long-form content, paragraph spacing for documents designed to be scanned or navigated. For The Compositor's Garden, indentation is the clear choice — it matches both the literary register of the content and the classical tradition the book belongs to.

The first paragraph after a heading, a section break, or any other display element should never be indented. The heading itself marks the beginning; the indent is redundant and looks awkward. In CSS, this means applying the indent to p + p — paragraphs that follow another paragraph — rather than to all paragraphs. The selector p:first-of-type can also be used, though it requires care in complex document structures where the first paragraph may not always be the one that needs special treatment.

Building a spacing system in CSS A single scale for all vertical distances

Just as type sizes should reference a proportional scale rather than arbitrary values, vertical spacing should reference a consistent spacing system. The principle is the same: every vertical distance in the document — the space above a heading, below a figure, between a caption and its image, around a callout box — is drawn from a small set of named values that are proportionally related to each other and to the body text's line-height.

The simplest approach is to base the spacing system on the body text's line-height. If the body text has a font-size of 1.175rem and a line-height of 1.76, the baseline line-height in absolute terms is approximately 2.07rem. Call this the rhythm unit. All vertical spacing is then expressed as a fraction or multiple of this unit: half a rhythm unit for tight spacing, one unit for standard spacing, two units for generous spacing, and so on.

In CSS, this is implemented most practically as a set of spacing custom properties, similar to the type scale custom properties from Chapter 8:

/* ── Rhythm unit ────────────────────────────── */
/* Body: 1.175rem × 1.76 ≈ 2.07rem per line    */
:root {
  /* Spacing scale */
  --space-xs:   0.4rem;   /* tight — between label and heading  */
  --space-sm:   0.75rem;  /* close — below heading, above body  */
  --space-md:   1.25rem;  /* standard — paragraph indent equiv. */
  --space-lg:   2rem;     /* generous — between sections        */
  --space-xl:   3rem;     /* open — above chapter headings      */
  --space-2xl:  5rem;     /* very open — chapter opener margin  */
}

With this system in place, all spacing decisions are made by choosing the appropriate named step, not by guessing a value. A heading needs more space above it than below it — margin-top: var(--space-xl), margin-bottom: var(--space-sm). A figure needs breathing room from the surrounding text — margin: var(--space-lg) 0. A caption sits close to its figure — margin-top: var(--space-xs). The names communicate intention; the values communicate proportion.

Putting it all together The complete spacing CSS for the project

With the type scale from Chapter 8 and the spacing system above, we now have the complete structural CSS for The Compositor's Garden. The following brings it together — scale, spacing, line-heights, and the paragraph treatment — into a single, coherent stylesheet foundation that every subsequent chapter will build on:

/* ════════════════════════════════════════════
   The Compositor's Garden — spacing foundation
   ════════════════════════════════════════════ */

:root {
  /* Type scale */
  --text-xs:    0.72rem;
  --text-sm:    0.85rem;
  --text-base:  1.175rem;
  --text-md:    1.32rem;
  --text-lg:    1.65rem;
  --text-xl:    2rem;
  --text-2xl:   2.8rem;
  --text-3xl:   3.75rem;

  /* Spacing system */
  --space-xs:   0.4rem;
  --space-sm:   0.75rem;
  --space-md:   1.25rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  5rem;

  /* Typefaces */
  --font-body:  'EB Garamond', Georgia, serif;
  --font-ui:    'Outfit', system-ui, sans-serif;

  /* Color palette */
  --paper:      hsl(35, 20%, 97%);
  --ink:        hsl(30, 8%, 11%);
  --ink-mid:    hsl(28, 6%, 28%);
  --ink-faint:  hsl(25, 5%, 58%);
  --rule:       hsl(30, 12%, 86%);
  --accent:     hsl(25, 42%, 30%);
}

html {
  font-size: 16px;          /* screen base  */
}

@media print {
  html { font-size: 10pt; } /* print base   */
}

body {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  line-height:    1.76;           /* unitless — scales with size */
  color:          var(--ink);
  background:     var(--paper);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Paragraph treatment: classical indentation */
p    { margin: 0; hyphens: auto; }
p + p { text-indent: 1.5em; }

/* No indent after structural elements */
h1 + p, h2 + p, h3 + p,
figure + p, blockquote + p {
  text-indent: 0;
}

/* Headings */
h2 {
  font-size:      var(--text-lg);
  font-weight:    400;
  font-style:     italic;
  line-height:    1.25;
  margin-top:     var(--space-xl);
  margin-bottom:  var(--space-sm);
}

Spacing is the invisible architecture of a page. Readers never remark on it — they only notice its absence, as vague discomfort, as effort, as the sense that something is slightly wrong without being able to say what. Getting it right removes friction. The text flows; the eye moves easily; the page feels considered even when the reader cannot say why. That invisibility is the goal, and the CSS in this chapter gets you there.

In Chapter 10, we turn to a dimension of typography that has only become fully accessible with modern CSS: the OpenType feature set. Ligatures, old-style numerals, kerning, small caps — these are the refinements that separate a document that is merely well-typeset from one that is genuinely beautiful.