Part Three — Grid and Layout Chapter Fourteen

The Page as a Spatial System

A margin is not empty space. It is ground — the condition that allows the text to exist as figure. Understanding margins as active design elements, not leftover areas, changes everything about how you lay out a page.

Margins and their proportional logic
The classical page: inner, outer, head, foot margins
White space as an active design element
Adapting classical proportions for screen and print

Hold a well-made book at arm's length and look at a spread — two facing pages together. Before you read a word, you are looking at a composition: a rectangle of text floating in a field of white. The white is not nothing. It is the ground against which the text exists as figure, and its proportions are as deliberate as any other element on the page. The margin at the foot of the page is wider than the margin at the head. The outer margin is wider than the inner. The text block sits slightly above the geometric centre of the page. None of this is accidental. It reflects five centuries of accumulated observation about what makes a page of text comfortable to hold, to read, and to look at.

This chapter is about margins — not the CSS margin property applied to individual elements, but the page-level margins that define the relationship between the text area and the physical edge of the page. These are the margins you define in Paged.js using the @page rule, and they are the spatial decisions that shape the entire page before a single element is placed. Getting them right is as important as any typographic decision in this book.

· · ·

Margins and their proportional logic Why the margins are not equal

The most common layout mistake made by designers coming from a web background is to set equal margins on all four sides of the page. On screen, where a page has no physical presence and is not held in human hands, this is defensible — symmetry is neutral and inoffensive. In a printed document, equal margins are almost always wrong, for reasons that are partly perceptual and partly physical.

The perceptual reason is figure-ground. As established in Chapter 1, the ground shapes the perception of the figure. A text block with equal margins on all sides appears to be centred on the page — and centred objects tend to look as though they are sinking, because the eye places the visual centre of a field slightly above its geometric centre. To make a text block look visually centred, it must sit slightly above the geometric centre, which means the foot margin must be larger than the head margin. This is not a convention or a preference. It is a perceptual fact, and it is why every tradition of page design that has thought carefully about the question arrives at a larger foot margin.

The physical reason is the gutter. In a bound book, the inner margins of facing pages are adjacent to the spine. Some of that space is lost to the binding — swallowed into the gutter where the pages are attached. The inner margin must be generous enough that, after the binding consumes its share, enough visible margin remains to give the text room to breathe on that side. The outer margin, being on the open edge of the page, loses nothing to binding. It therefore needs less depth to achieve the same visual breathing room — and yet, in classical page design, it is wider than the inner margin, because it serves as the reader's thumb rest and as visual breathing room on the far side of the text block.

These two requirements — a larger foot than head, and a wider outer than inner — define the classical proportional logic of page margins. They are not arbitrary rules. They are solutions to real spatial problems, arrived at by typographers over centuries of printed books. Understanding why they work makes it easier to adapt them intelligently to new formats and new constraints.

Figure 14.1 — The four margin zones on a book spread. Verso (left) and recto (right) pages shown together. The inner margins are adjacent to the spine — narrowest, because some space is lost to binding. The outer margins are on the open edge — wider, serving as a thumb rest and visual breathing room. The head margin is moderate. The foot margin is largest, preventing the text block from appearing to sink. The text blocks of both pages align along the spine, creating a coherent spread rather than two isolated pages.

· · ·

The classical page canon Proportions that have endured five centuries

The proportional system most commonly associated with classical book design — sometimes called the Van de Graaf canon or the Tschichold canon — derives the text block and margins from the page dimensions using simple geometric constructions. The essential result is that the inner margin, head margin, outer margin, and foot margin are in the approximate ratio of 1 : 1.2 : 1.5 : 2. On a page of typical book proportions, this places the text block occupying roughly half the page area, positioned slightly above the geometric centre and inset further from the outer edge than the inner.

The precise values of this ratio produce margins that have a specific quality: they feel inevitable rather than chosen. A page designed with these proportions does not announce its margins. The reader simply finds the text where it ought to be, and the page feels at rest. This is the goal — not a specific measurement, but a specific perceptual quality — and the classical ratio is the most direct path to achieving it.

In Paged.js, these margins are expressed in the @page rule using the margin property or its individual sides. For a 5.5 × 8.5 inch trade paperback using the classical ratio approximated to practical values:

@page {
  /* Page dimensions                           */
  size: 5.5in 8.5in;

  /* Classical margin proportions
     inner : head : outer : foot ≈ 1:1.2:1.5:2
     At 5.5in wide / 8.5in tall:             */
  margin-top:    0.75in;  /* head    */
  margin-bottom: 1in;     /* foot    */
  margin-inside: 0.625in; /* inner (gutter side) */
  margin-outside:0.875in; /* outer   */
}

Notice the use of margin-inside and margin-outside rather than margin-left and margin-right. These are logical margin properties introduced in CSS Paged Media that understand the difference between recto and verso pages: margin-inside always refers to the gutter side — left on a right-hand page, right on a left-hand page — and margin-outside always refers to the open edge. This is essential for a double-sided document where the inner and outer margins swap positions between pages.¹

Figure 14.2 — Margin proportions and visual stability. Three pages with identical text blocks. Left: equal margins — the text block appears to be sinking, because equal spacing places the visual centre below where the eye naturally reads it. Centre: classical proportions (head smaller than foot) — the text block sits at rest, visually grounded on the page. Right: inverted proportions (head larger than foot) — the text appears to be falling off the bottom of the page, with nothing to hold it in place.

· · ·

White space as an active element The margin is not leftover

The most productive shift in thinking about page margins is from passive to active. The conventional view is that content fills the page and margins are what is left over — the unavoidable empty areas at the edges. The designer's view is the opposite: the margins are designed first, and the content lives within them. The space is not the residue of the content. The content is what remains after the space has been considered.

This shift has practical consequences. If margins are leftovers, you minimize them to get more content on the page. If margins are active elements, you give them exactly as much space as the page and content require — no more, but importantly no less. A generous foot margin is not wasted space. It is the ground that makes the text legible as figure. A wide outer margin is not inefficiency. It is the breathing room that allows the eye to approach the text without the page feeling claustrophobic.

The outer margin also serves a specific functional purpose in a printed book: it is where the reader's thumbs rest. When you hold a book open, your thumbs naturally fall somewhere on the outer margins. If the outer margin is too narrow, thumbs cover the text. If it is generous, the reader can hold the book comfortably without obscuring anything. This is not a design nicety — it is a physical requirement that determines the minimum viable outer margin for any book intended to be held and read.

The foot margin serves a similar functional role. It provides space for the folio — the page number — without crowding it against the text. A folio in the foot margin, centered or set to the outer edge, sits in a zone the reader can glance to for navigation without it interrupting the reading of the text. If the foot margin is too small, the folio crowds the body text or has to be omitted; if it is generous, the folio sits comfortably below the last line of text with its own quiet space.

· · ·

Adapting classical proportions Screen, digital PDF, and non-book formats

The classical margin proportions were developed for a specific context: a bound book held in two hands. When the context changes — a single-sided report, a digital PDF read on screen, a document in landscape orientation — the proportions must be re-examined rather than mechanically applied.

For a single-sided document — a report or academic paper that will be read as a PDF or printed single-sided — the distinction between inner and outer margins is meaningless. There is no spine, no gutter, no recto-verso distinction. The appropriate margins are a moderate, non-equal set: a slightly larger bottom margin than top, left and right margins that are equal (or with the right slightly larger on a right-hand page, where the reader's eye has more open space). The classical ratio's essential insight — foot larger than head, margins creating breathing room — still applies; the inside-outside distinction does not.

For a digital PDF read on screen, the physical thumb-rest requirement vanishes, but the perceptual requirements remain. A PDF read in a full-screen reader still benefits from a generous foot margin, because the reader's eye still expects to find the text sitting slightly above the page's geometric centre. The proportions can be slightly tighter than for a printed book — the absence of a physical binding means no gutter allowance is needed — but the essential asymmetry between head and foot should be preserved.

For a landscape document or a wide-format page, the classical proportions often produce outer margins that are disproportionately wide relative to the page's horizontal extent. A landscape A4 page with a classical outer margin would be almost entirely margin. The appropriate response is to scale the margins to the page's actual proportions rather than apply the classical ratios mechanically — to find the margins that produce the same perceptual quality (grounded, at rest, with breathing room) in the specific format being designed.

/* ── Margin examples for common formats ───────── */

/* Trade paperback 5.5 × 8.5in — full classical    */
@page {
  size:            5.5in 8.5in;
  margin-top:      0.75in;
  margin-bottom:   1in;
  margin-inside:   0.625in;
  margin-outside:  0.875in;
}

/* A4 single-sided report — adapted               */
@page {
  size:            A4;
  margin-top:      25mm;
  margin-bottom:   32mm;
  margin-left:     25mm;
  margin-right:    28mm;
}

/* Letter digital PDF — screen-optimised           */
@page {
  size:            letter;
  margin-top:      0.75in;
  margin-bottom:   0.9in;
  margin-left:     1in;
  margin-right:    1in;
}

/* Named pages — different margins for chapter
   openers vs. body pages                         */
@page chapter-opener {
  margin-top:      2in;   /* Large drop for drama */
  margin-bottom:   1in;
  margin-inside:   0.625in;
  margin-outside:  0.875in;
}

The named page example above introduces a concept we will explore more fully in Chapter 16: @page can target specific named page types, allowing chapter openers to have a dramatically larger head margin — the classic "chapter drop" — while body pages use standard proportions. This is one of the most expressive typographic conventions available in print, and Paged.js implements it fully through the CSS Paged Media specification.²

Figure 14.3 — Margins adapted for three contexts. Left: a trade paperback with full classical proportions — margin-inside and margin-outside adapt to recto and verso pages. Centre: an A4 single-sided report with equal left/right margins and an asymmetric head/foot — no recto-verso distinction, but the essential perceptual logic of foot-larger-than-head is preserved. Right: a chapter opener with a dramatically large head margin using a named @page — the title drops into a field of space, creating the sense of ceremony appropriate to a chapter beginning.

· · ·

The complete page CSS Putting it together for the project

The following is the complete @page configuration for The Compositor's Garden, combining the page size, the classical margin proportions, and the named page type for chapter openers. This is the CSS that, when interpreted by Paged.js, transforms the styled HTML document into a properly margined, paginated book:

/* ════════════════════════════════════════════
   Page geometry — The Compositor's Garden
   5.5 × 8.5in trade paperback
   ════════════════════════════════════════════ */

/* Default page — body pages                    */
@page {
  size:             5.5in 8.5in;

  /* Classical proportions
     inner : head : outer : foot ≈ 1:1.2:1.5:2  */
  margin-top:       0.75in;   /* head            */
  margin-bottom:    1in;      /* foot (largest)  */
  margin-inside:    0.625in;  /* gutter side     */
  margin-outside:   0.875in;  /* open edge       */
}

/* Chapter opener — large drop                  */
@page chapter-opener {
  margin-top:       2in;      /* dramatic drop   */
  margin-bottom:    1in;
  margin-inside:    0.625in;
  margin-outside:   0.875in;
}

/* Assign chapter openers to their named page   */
.chapter-opener {
  page:             chapter-opener;
  break-before:     right;  /* always recto    */
}

/* Front matter — roman numerals for folios      */
@page front-matter {
  margin-top:       0.75in;
  margin-bottom:    1in;
  margin-inside:    0.625in;
  margin-outside:   0.875in;

  /* Counter reset for roman numeral folios      */
  @bottom-center {
    content: counter(page, lower-roman);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }
}

Project checkpoint

The spatial structure of The Compositor's Garden is now fully defined. The CSS grid from Chapter 13 provides the column structure within the page; the @page rules above provide the page geometry itself — dimensions, margins, and named page types for different sections.

At this stage in the project files, the document has everything it needs except the Paged.js-specific elements: the running headers that display in the page's margin boxes, the automatic page numbering, and the break controls that manage where pages turn. Those are the subjects of Part Four, beginning with Chapter 16. Chapter 15 — the next chapter — covers multi-column layouts as a bridge between the single-column book grid and the more complex layouts needed for the report and editorial projects in Part Five.

· · ·

The page is a spatial system, and designing it means making the same kinds of decisions that architects make about rooms: how much space, in what proportions, for what purpose. The classical margin ratios are not rules to be followed without thought — they are the accumulated answer to a question that designers have been asking for five centuries. Understanding why they work gives you the confidence to adapt them when the context demands it, and to apply them with conviction when it does not.

Chapter 15 moves to the specific challenge of multi-column layouts: when they are appropriate, how column width and gutter interact with legibility, and how CSS handles the transition between single-column and multi-column content within the same document.

Notes

The CSS logical properties margin-inside and margin-outside are part of the CSS Paged Media specification and are supported by Paged.js. They differ from the CSS Logical Properties specification (margin-inline-start and margin-inline-end), which operates on writing direction rather than page binding direction. In a Paged.js document, always use margin-inside and margin-outside for the gutter and open-edge margins of a bound document, not their logical-property equivalents.
The "chapter drop" — a large head margin on chapter opening pages — is one of the oldest conventions in book design. It serves several purposes: it signals to the reader that something new is beginning; it gives the chapter title room to exist as a display element rather than as just a large heading; and it creates a deliberate change of pace after the continuous body pages, giving the reader a moment of visual breath before the new text begins. The size of the drop is a design decision — two inches is generous and dramatic, one inch is more restrained — and it can be used consistently throughout a book or varied by chapter depending on the content's character.
The CSS counter(page, lower-roman) syntax used for front matter folios is part of the CSS Generated Content for Paged Media specification. Paged.js implements this fully. The counter type lower-roman produces i, ii, iii, iv, v and so on; upper-roman produces I, II, III, IV, V. Resetting the counter to 1 at the start of the main body requires a counter-reset declaration on the first body page, which Paged.js handles through the named page mechanism.