Designing a Long-Form Report

A long-form report is read differently from a book. Readers of a book begin at page one and proceed forward. Readers of a report arrive at different entry points — the executive summary, the section most relevant to their brief, a specific figure cited in a meeting — and navigate laterally across sections rather than linearly through them. The design of a report must accommodate both kinds of reading: the executive who reads only the first six pages, the analyst who reads every table, the policymaker who searches for a specific recommendation and needs to find it quickly. A report that is designed only for sequential reading will fail its busiest readers. A report designed only for navigation will feel thin and graceless to anyone who reads it properly. The design problem is to serve both.

This chapter builds a long-form report from the ground up, introducing each major element — cover, executive summary, table of contents, body sections, data tables, callout statistics, sidebars — with both its design rationale and its CSS implementation. The report we build is a generic but realistic 30-page policy document: the kind of thing produced by research institutes, government agencies, and professional services organisations for audiences that are expert in the subject but time-constrained in their reading.

How a report differs from a book Structure, hierarchy, and the impatient reader

The most important structural difference between a report and a book is the hierarchy of readers. A book has, in effect, one reader: someone who will read from beginning to end. A report has several simultaneous readers at different depths of engagement, and the design must serve all of them. The executive who has twelve minutes reads the cover, the executive summary, and the key findings. The section lead reads the introduction, the relevant body sections, and the conclusion. The researcher reads everything, including the appendices, notes, and methodology. The design must make each of these reading paths clear, efficient, and self-contained without making any of them feel like a degraded version of the full experience.

This creates a hierarchy of typographic emphasis quite different from a book's. Where a book's hierarchy is primarily sequential — one chapter leading to the next, subheadings marking progress through an argument — a report's hierarchy is primarily navigational. The section numbers, the contents list, the running headers, the pull-out statistics, the clearly labelled figures: all of these exist to help readers locate, skip, and return to material according to their specific needs. A report with no section numbers is a report that makes navigation harder than it needs to be. A report with no pull-out statistics makes the executive summary reader do more work than necessary.

The other major structural difference is the relationship between prose and non-prose content. In a book, prose is primary and tables, figures, and illustrations are supplementary. In a report, this relationship is often reversed: the tables and figures may be the primary evidence, with the prose serving as interpretation and context. This means the design must give visual prominence to data — not by making it decorative, but by giving it the space, the clarity, and the typographic distinction it needs to be read accurately and quickly.

The executive summary Six pages that carry the whole argument

The executive summary is the most read section of any report, and frequently the only section read by the people with decision-making authority. It must be complete enough to be self-contained, concise enough to be read in fifteen minutes, and clear enough to be understood without reference to the full document. These requirements determine both its content — a tight synthesis of findings, conclusions, and recommendations — and its design.

The executive summary benefits from a distinct visual treatment that signals its special status within the document. The most effective approach is a dark or tinted background for the entire section — a visual container that makes the executive summary immediately identifiable when the document is opened at any page, and creates a clear boundary between the navigational front matter and the body that follows. When using a dark background, the text must be in a light color, and all typographic elements — headings, body text, key findings — must be re-specified against the dark ground rather than relying on the default light-background values.

Within the executive summary, key findings are often displayed as pull-out statistics or numbered conclusions. These give the busy reader visual anchors — the places they can look first and still extract the essential quantitative results. The design of these statistics matters: a very large number set in display type communicates scale and confidence; the same number in body-weight text communicates information without emphasis. Choose the treatment that matches the claim.

/* ── Executive summary — dark panel ─────────────── */
.exec-summary {
  background:      var(--ink);
  color:           rgba(248, 245, 240, 0.88);
  padding:         1.75rem 2rem;
  page:            exec-summary;
  break-before:    page;
  break-inside:    avoid;
  /* Ensure background prints                     */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ── Key statistics row ────────────────────────── */
.stat-row {
  display:         grid;
  grid-template-columns: repeat(3, 1fr);
  gap:             1px;
  break-inside:    avoid;
}

.stat-number {
  font-family:     var(--font-body);
  font-size:       var(--text-2xl);
  line-height:     1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

Data tables Presenting numbers with precision and clarity

Tables in a report are not decoration. They are primary evidence, and they must be designed to be read — accurately, quickly, and without ambiguity. The principles of good table design are few and well established: aligned columns, consistent units, clear headers, minimal visual noise, and a clear hierarchy between data cells and summary or total rows.

The first typographic decision for a data table is the numeral style. Body text uses old-style proportional numerals for integration with prose — but data tables require lining tabular numerals, which are all the same height and all the same width. Same height so the numbers do not produce an irregular visual rhythm across the table; same width so numbers in the same column align vertically, allowing the eye to compare magnitudes at a glance. Set font-variant-numeric: lining-nums tabular-nums on the table element, or equivalent font-feature-settings as shown in Chapter 10.

Alignment is the second decision. Text columns are left-aligned; number columns are right-aligned. This is not an aesthetic preference — it is a functional requirement. Right-aligned numbers place all units digits in the same horizontal position, making it immediately apparent which number is larger. A column of right-aligned numbers can be compared top to bottom with minimal eye movement. A column of left-aligned numbers cannot, because the units digits may be anywhere in the column width depending on the number of digits.

Zebra striping — alternating row backgrounds — is optional but useful for wide tables where the eye might lose its row and track across to the wrong data. A subtle tint, just a few percent above the background white, is sufficient. Avoid strong alternating colors that compete with the data or create a distracting grid pattern.

Sidebars and pull-out elements Serving the skimmer without shortchanging the reader

A sidebar is a block of text that runs parallel to the main text but is visually distinguished from it — by a border, a tint, a different typeface weight, or its position in a margin column. Sidebars serve readers who are skimming by providing self-contained summaries, definitions, or contextual information that does not interrupt the main argument. They serve readers who are reading deeply by providing supplementary material without forcing them to leave the text and find an endnote.

The design of a sidebar must establish its relationship to the main text clearly. Too visually similar, and it blurs into the prose. Too visually different, and it becomes a separate document that competes for attention. The middle ground — a light tint background or a left border rule, the same typeface but a slightly smaller size or a different weight, a label identifying it as supplementary — communicates supplementary without competing.

Pull quotes in a report serve a different function than in editorial design. Where a magazine pull quote is primarily a design device — a way to break up a text column visually — a report pull quote is a navigational device: it surfaces a key statement that the skimming reader should not miss. A report pull quote should be genuinely informative, not merely atmospheric. It should be a claim or conclusion that stands alone without context, not a sentence that only makes sense if the surrounding paragraphs have been read.

Section hierarchy and navigation Numbering, headings, and the table of contents

A long-form report requires a numbering system for its sections. This is not primarily a typographic requirement — it is a navigational and referential one. Section numbers allow readers to navigate by number rather than by title, allow the table of contents to map the document structure precisely, and allow external references to cite specific sections without ambiguity. A report that says "see the section on policy interventions" is less usable than one that says "see §3.2."

In HTML and CSS, section numbers can be generated automatically using CSS counters, which increment at each heading element and can be concatenated to produce hierarchical numbering (1.1, 1.2, 2.1, 2.2, and so on) without manual numbering in the HTML source. This is preferable to hardcoded numbers in the HTML, because content can be reordered without renumbering. Paged.js respects CSS counters in the same way as screen CSS:

/* ── Automatic section numbering ──────────────── */
body          { counter-reset: section; }
.report-section { counter-increment: section;
                   counter-reset: subsection; }
.report-subsection { counter-increment: subsection; }

/* Heading labels from counters                  */
.report-section h2::before {
  content: counter(section) ". ";
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.report-subsection h3::before {
  content: counter(section) "." counter(subsection) "  ";
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-style: normal;
}

/* Table of contents: use leader dots            */
.toc-entry {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}
.toc-leader {
  flex: 1;
  border-bottom: 1px dotted var(--rule);
  margin-bottom: 0.2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

A well-designed report respects all its readers at once: the executive who wants findings, the analyst who wants evidence, the researcher who wants methods. None of these readers is wrong. All of them have legitimate claims on the document's design. Serving them simultaneously — through clear hierarchy, honest data presentation, and consistent navigational structure — is what distinguishes a report that is used from one that is merely submitted.

Chapter 22 turns to a quite different challenge: the editorial layout. Where the report values clarity, efficiency, and hierarchy, the editorial layout values energy, visual contrast, and the interplay of type and image. The same underlying CSS system applies, but the design sensibility is entirely different.