Designing a Book Interior

You have already built one book interior: The Compositor's Garden. That project, assembled across Parts Two, Three, and Four, gave you the full typographic system — typefaces, scale, spacing, grid, margins, running headers, page numbers, break controls. What it did not give you was breadth. A literary essay collection is one kind of book, with one set of requirements. The skills needed to design it carry over to other kinds, but the decisions do not. A textbook, a cookbook, a poetry collection, a collected letters — each has its own structural conventions, its own hierarchy of elements, its own specific CSS patterns. This chapter moves from the particular to the general: from one book to the underlying principles and techniques that apply to any book interior, whatever its genre or content.

We work through the book's three-part physical structure — front matter, body, back matter — with attention to the conventions that govern each zone and the CSS that implements them. We then look at the specific design challenges that distinguish book interiors from other documents: the chapter opener as a distinct compositional moment, the drop cap as a transitional device, the section break as a breathing space, and footnotes as a second voice running below the main text. The chapter ends with a reference implementation — a complete, generic book interior stylesheet built on the project's foundation, ready to adapt for any content.

· · ·

The three zones of a book Front matter, body, back matter

Every book, regardless of genre or format, divides into three physical zones: the front matter that precedes the main text, the body that contains it, and the back matter that follows. Each zone has its own conventions — conventions so well established that readers navigate them unconsciously, and violating them creates disorientation even in readers who could not name the convention being broken.

Understanding these zones is the starting point for any book design project, because they determine the page sequence, the folio numbering system, the running header content, and the break behavior at each major structural boundary.

Zone	Contents (in order)	Conventions
Front matter	Half-title, frontispiece (if any), title page, copyright, dedication, table of contents, preface, foreword	Lowercase roman numeral folios (i, ii, iii). No folio on the title page. Versos of display pages left blank. Preface and foreword may have running headers; earlier pages typically do not.
Body	Introduction (if separate from preface), chapters, parts or sections	Arabic numeral folios starting from 1. Chapter openers always on recto. Running headers show book title on verso, chapter title on recto. Body is the longest zone and the one designed most carefully.
Back matter	Appendices, notes (if consolidated), bibliography, glossary, index, colophon	Continues arabic folio sequence from body. May use different typography — smaller type size, two-column layout for index and bibliography. Appendices may be treated as chapters or as a distinct section.

In CSS Paged Media, these zones are implemented as named page sequences, each with its own @page rule. The front matter uses the front-matter named page from Chapter 17. The body uses the body and chapter-opener named pages. The back matter typically reverts to the body named page with the same running headers, or switches to a modified page rule that changes the header content or column count for specific back matter sections like the index.

· · ·

Chapter openers The threshold between rest and reading

The chapter opener is the typographic moment that sits between the previous chapter's end and the new chapter's beginning. It signals transition, establishes the new chapter's identity, and gives the reader a visual pause before the text resumes. In design terms, it is the most expressive page in the book — the place where the designer has the most freedom and the most responsibility.

The essential elements of a chapter opener are the chapter number, the chapter title, and an optional introductory element — an epigraph, a short description, or an illustrated device. The arrangement of these elements, and their relationship to the drop into the page, is what distinguishes a thoughtfully designed opener from a merely functional one.

The chapter drop — the large head margin on opener pages — creates a field of white space above the chapter material. This space is not empty; it is active ground, giving the chapter number and title room to exist as display elements rather than just headings. The standard drop for a trade paperback is between 1.5 and 2.5 inches — enough to create a clear sense of ceremony without so much that the page feels mostly empty. In Paged.js, this is implemented as a named page with a larger margin-top, as demonstrated in Chapter 14.

The chapter number deserves particular attention. It can be handled in several ways: as a large, ghosted background element (a typographic device where the numeral appears very large and very light, almost like a watermark behind the chapter title); as a small, labeled element in the UI typeface; as a Roman or word-form numeral spelled out in display type; or simply omitted if the book is not formally chaptered. Each approach signals a different register — the ghosted numeral is dramatic and contemporary; the small label is quiet and classical; the spelled-out word is formal and literary.

· · ·

Drop caps and section breaks Beginning and pausing

The drop cap is one of the oldest conventions in Western typography, predating printing by centuries in its manuscript form. Its purpose is transitional: it marks the beginning of a sustained piece of prose, signals to the reader that reading should now begin in earnest, and provides a visual anchor in the white space that follows the chapter opener. Done well, a drop cap is invisible in the sense that it reads as natural and inevitable rather than decorative and applied. Done poorly, it is merely a large letter.

In CSS, the drop cap is implemented with the ::first-letter pseudo-element. The key properties are font-size, float: left, line-height, and careful margin adjustments to align the cap's cap height with the first line of the following text. The number of lines the cap spans — typically two or three — determines the font size, and this depends on the body text's line-height. The calculation is: if the body text has a computed line-height of 28px and you want a two-line drop cap, the cap height of the dropped letter must be approximately 56px. Since cap height is roughly 70% of the total font size for most serif typefaces, the font-size should be approximately 80px.¹

/* ── Drop cap: three-line depth ───────────────── */
.chapter-body > p:first-of-type::first-letter {
  font-size:    4.2em;     /* approx 3 lines at 1.76 lh  */
  float:        left;
  line-height:  0.78;     /* tuck the cap down to sit on baseline */
  margin-right: 0.06em;
  margin-top:   0.08em;   /* align cap-height to first baseline */
  font-weight:  500;
  color:        var(--ink);
}

/* First line after drop cap: small caps          */
.chapter-body > p:first-of-type::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing:    0.06em;
}

The section break is a simpler but equally important device. It marks a pause within a chapter — a shift in focus, a change of scene, a moment of white space between related but distinct sections. The most understated form is a blank line between paragraphs. A more deliberate form uses a centered typographic mark — three dots, an ornamental separator, or a simple rule. The choice of mark signals the register of the document: three dots (· · ·) are quiet and contemporary; a typographic ornament is more literary; a rule is formal and clear.

/* ── Section break separator ──────────────────── */
.sep {
  display:      block;
  text-align:   center;
  color:        var(--ink-faint);
  font-size:    var(--text-sm);
  letter-spacing: 0.3em;
  margin:       2.75rem 0;
  user-select:  none;

  /* Never strand a section break at page edge    */
  break-before: avoid;
  break-after:  avoid;
}

· · ·

Footnotes and endnotes A second voice on the page

Footnotes and endnotes serve the same purpose — providing supplementary information without interrupting the main text — but they produce very different reading experiences. Footnotes appear at the foot of the page where the reference mark appears, so the reader can glance down without losing their place. Endnotes are consolidated at the back of the book, requiring the reader to leave the text entirely to consult them. Footnotes are more convenient for the reader; endnotes are more convenient for the designer, because they do not require dynamic sizing of the foot area.

Chapter 19 introduced the complete footnote system for Paged.js: float: footnote on the note element, ::footnote-call for the superscript reference in the text, ::footnote-marker for the number at the start of the footnote, and @footnote within the named @page rule for the area itself. The same four rules apply directly to a book interior. Place the footnote content inline in the paragraph as a <span class="fn"> at the exact position of the reference, and the CSS moves it to the foot of the page automatically:

/* ── Footnote system for a book interior ──────── */

.fn {
  float:       footnote;
  font-size:   var(--text-sm);
  line-height: 1.62;
  color:       var(--ink-mid);
}

.fn::footnote-call {
  content:        counter(footnote, decimal);
  font-size:      0.65em;
  vertical-align: super;
  line-height:    0;
  color:          var(--accent);
  margin-left:    0.05em;
}

.fn::footnote-marker {
  content:       counter(footnote, decimal) '.';
  font-size:     var(--text-xs);
  color:         var(--ink-faint);
  padding-right: 0.4em;
}

@page body {
  @footnote {
    border-top:  1px solid var(--rule);
    padding-top: 0.75rem;
    margin-top:  1rem;
  }
}

/* Reset per chapter, not per book                */
.chapter-body { counter-reset: footnote; }

For simpler documents or those where the number of footnotes per page is predictable and small, a more reliable alternative to float: footnote is to implement footnotes as endnotes: collect all footnote text in a consolidated notes section at the back of the book, and use superscript markers in the main text that correspond to numbered entries in the notes section. This approach requires no special CSS support and produces consistently reliable output, at the cost of the reader's convenience.

· · ·

The Compositor's Garden — examined How the project implements these principles

The project built through Parts Two, Three, and Four is a working instance of everything described in this chapter. Rather than leaving the connection implicit, it is worth examining the specific decisions made — the CSS behind the grid, the display pages, and the zone transitions — so the link between principle and code is visible.

The chapter body is defined in 04-layout.css as a three-column CSS grid:

/* ── The Compositor's Garden: body grid ──────── */
.chapter-body {
  display:               grid;
  grid-template-columns: 2rem 1fr 6rem;
  grid-template-areas:   "margin  text  notes";
  column-gap:            1.5rem;
  max-width:             52rem;
  margin:                0 auto;
}

/* All content defaults to the text column        */
.chapter-body > * { grid-column: 2; }

Three tracks: a narrow 2rem inner margin strip, a flexible 1fr text column, and a 6rem outer notes column. Every block-level element is assigned to grid-column: 2 — the text track. The outer columns are reserved but unpopulated in this edition; their presence is what creates the proportions of a page that feels wider than its text column, because the unused tracks read as generous margins without carrying any content. The max-width: 52rem at 16px base equals 832px — wide enough to hold the 66-character measure established in Chapter 9 with room for the two outer columns.

This grid is correct for screen preview, where the browser window is wide and the columns produce well-proportioned reading geometry. For the PDF it requires an override. On the 5.5 × 8.5in trim, the @page margins (0.625in inside, 0.875in outside) constrain the content area to 4 inches — 384px in the browser coordinate system Paged.js uses. Within that space, the fixed tracks and gaps consume roughly 240px, leaving the text column at around 1.5 inches: uncomfortably narrow for body text. The @page margins are already providing the horizontal whitespace; the grid's outer columns are redundant overhead. 07-print.css resets this when injected at build time:

/* ── 07-print.css: strip screen-preview constraints ── */
.chapter-body {
  display:   block;
  max-width: none;
  margin:    0;
  padding:   0;
}

With the grid collapsed, content flows as a simple block across the full 4-inch content area. This is the correct division of responsibility: 04-layout.css serves the browser preview; 07-print.css resets what is no longer needed and lets the @page geometry do its job.

Front matter display pages — half-title, title page, copyright verso, dedication — use a different pattern: a flexbox container that fills and centers on the page:

.display-page {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
}

The min-height: 100vh fills the full viewport in the browser preview. Paged.js replaces the viewport height with the actual page height when paginating — the element expands to cover one complete page surface. This is the standard pattern for full-page elements: size to 100vh for the browser, and the pagination engine applies the correct page geometry automatically. The same principle applies to chapter openers and part dividers.

The three book zones map to seven named @page rules in 06-page.css. Front matter display pages use @page front-matter-display, which suppresses both the running header and the folio entirely — these are the pages where numbering has not yet begun and no header is appropriate. The table of contents and preface use @page front-matter with roman numeral folios at the bottom center. Chapter openers use @page chapter-opener with a 2-inch head margin and no running header, which creates the large drop above the chapter label. Body pages use @page body with the book title in the top-left margin box and the current chapter title — captured with string-set and propagated by Paged.js across all pages of that chapter — in the top-right margin box. Back matter pages use @page back-matter, which shares the body's geometry but populates the header with the section name rather than the chapter title.

Every rule in the project is an instance of a principle from Parts Two through Four. What this chapter adds is the perspective from which to read those rules — not as isolated CSS but as a coherent system in which the grid, the page geometry, the typography, and the page furniture work together so that the book reads as a single made thing rather than a collection of parts. That coherence, more than any individual decision, is what distinguishes a designed book from a styled document.

· · ·

Book interiors reward patience and attention in a way that few design projects do. Every page of a well-made book is an argument — for the typeface chosen, for the margins set, for the breaks controlled, for the footnotes placed. The reader never reads this argument directly. They feel it as ease, as comfort, as a quiet sense that the book was made with care. That quality is what Parts Two through Four of this book equipped you to produce, and what this chapter has shown you how to generalise beyond a single project.

Chapter 21 turns from the book to the report — a document type with different conventions, different hierarchies, and different relationships between the visual and verbal content that require fresh thinking about structure, data presentation, and navigational design.