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.

In Paged.js, footnotes are supported through the CSS Paged Media specification's float: footnote value. An element with this value is removed from the normal flow and placed in the page's footnote area — the region between the text column and the foot margin — with a separator rule and the appropriate footnote marker. This is the most powerful and complex feature of CSS Paged Media, and Paged.js's implementation requires specific markup:

/* ── Paged.js footnote implementation ─────────── */

/* HTML: inline footnote marker + content         */
/* <span class="fn">
     <span class="fn-marker"></span>
     <span class="fn-body">The footnote text.</span>
   </span>                                         */

/* Float footnote body to footnote area           */
.fn-body {
  float:            footnote;
  font-size:        var(--text-sm);
  line-height:      1.62;
  color:            var(--ink-mid);
}

/* Auto-numbered marker                           */
.fn-marker {
  display:          none; /* Paged.js generates the marker */
}

/* Footnote counter: superscript in text          */
.fn::before {
  content:          counter(footnote);
  font-size:        0.64em;
  vertical-align:   super;
  color:            var(--accent);
}

/* Separator rule above footnote area             */
::footnote-call {
  content:          counter(footnote, decimal);
  font-size:        0.64em;
  vertical-align:   super;
  color:            var(--accent);
}

::footnote-marker {
  content:          counter(footnote, decimal) ". ";
  font-size:        var(--text-sm);
  color:            var(--accent);
}

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

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.

· · ·

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.