Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.
-
Set the measure first — 45–75 characters per line. The measure is the single most important
reading-layout decision. Aim for ~66ch as the target, 45ch floor, 75ch ceiling
(Bringhurst's classic range; the lower 50–60ch band suits the wider leading of screens). Set it
with max-width in ch units (or ~38rem) on the reading column, not on the viewport —
a full-bleed paragraph that runs 120 characters wide is the most common long-form failure, the
eye loses the line return. Tables, figures, and code may break out of the measure
deliberately; running prose never exceeds it.
-
Build the reading rhythm on the doctrine numbers. Per
doctrine/references/type-scale-and-spacing.md: body 16–20px (long-form reads larger than
UI — 18–20px is editorial-comfortable), line-height ≈ 1.5–1.6 for body (the reference's
≥1.6 for small text), tightening toward 1.3–1.1 as headings grow past 32px. Separate
paragraphs by either a blank line (one spacing-unit of space-after) or a first-line
indent — never both, and never both absent. Indent is the book convention; spaced blocks are
the web convention; pick one per artifact and hold it.
-
Snap to a baseline rhythm. Establish one vertical unit (tie it to the body line-height, e.g.
an 8pt or line-height-derived grid per the spacing-rhythm rule) and make body leading, space
above/below headings, figure margins, and block quotes all multiples of it, so text across
the page sits on a shared baseline. Uneven, arbitrary vertical gaps are the "assembled, not
typeset" tell. Headings get more space above than below (they belong to the section they
open) — this grouping is what makes structure legible at a glance.
-
Build the scannability layer — the reader must navigate without reading. Long-form is read
in two modes: scan, then read. Provide landmarks: a lead/standfirst (larger, often a
distinct weight, summarising the piece), subheads every few hundred words (real <h2>/<h3>
in the heading scale, ≥1.25 ratio jumps), and for long reports an in-page table of contents
(sticky or top-anchored, jump links). Subheads carry meaning — write them to be skimmed in
sequence as an outline. Front-load: the first sentence of each section should let a skimmer
decide whether to slow down.
-
Place the drop cap as a deliberate entry, not decoration. A drop cap marks the start of the
read — use it once, at the opening paragraph (or section openings in a very long piece), never
sprinkled. Set it to 2–4 lines deep, optically aligned: the cap's cap-height sits flush to
the first body baseline and its left edge hangs to the text margin (a glyph beside the
measure looks indented if set mathematically flush — overshoot it, per the optical-alignment
rule in layout-grid-and-spacing). Use initial-letter where supported with a float fallback.
Pair the cap with small-caps for the first few words for a classic editorial open, or skip
the cap entirely — but make it a stated choice, not a reflex.
-
Pull-quotes amplify, they don't repeat. A pull-quote lifts a striking line to create a
visual rest and a re-entry point for skimmers — it must not be the first appearance of that
text in the flow it sits beside (a pull-quote duplicating the adjacent sentence is a slop tell).
Set it larger (a real scale jump), in the heading or a contrasting face/weight, break it out of
the measure (full-width, or into the margin), and give it generous asymmetric space. One every
~400–600 words at most; more turns rhythm into noise.
-
Choose footnotes vs. sidenotes deliberately. Asides and citations have two web treatments:
footnotes (numbered, collected at the article end, anchor-linked both ways — robust, works
at every width) or sidenotes/marginal notes (set in the outer margin beside their reference,
Tufte-style — superb on wide screens, but they must collapse to inline/expandable footnotes
below the measure on narrow viewports, never overlap the text column). Decide by available
width and density: dense scholarly citation → footnotes; a few rich asides on a wide editorial
page → sidenotes with the narrow-viewport fallback. Every note reference is a real two-way link
(superscript marker ⇄ note), keyboard-focusable.
-
Handle figures as first-class blocks with real captions. A figure is image/table/chart +
a numbered caption — never a bare floating image. Decide each figure's width band: inset
(within the measure), breakout (wider than the measure, centred), or full-bleed (edge to
edge) — vary them so the page has rhythm rather than a column of identical inset images. Caption
sits below the figure, set smaller (caption step in the scale) in a quieter colour/face,
numbered ("Figure 1."), and is the alt-text's complement, not its substitute. Keep figure and
caption together across any column or page break; never orphan a caption.
-
Use multi-column only where it earns its place. True newspaper-style multi-column on the web
is usually a mistake for a single article — it forces the reader's eye to travel up and back
down a tall viewport, and column-count with no fixed page height creates exactly that scroll
trap. Prefer a single well-measured column for continuous reading. Reserve multi-column for
content that is genuinely parallel and short-segment (a glossary, a reference card, link
indexes, a footnote block) where each item is shorter than the viewport — use CSS columns with
column-width (intrinsic, reflows by available width) and break-inside: avoid on items. State
why multi-column helps this content before using it.
-
Define the responsive and print behaviour. The measure is set in ch/rem, so it survives
most widths automatically; below it, the column simply gets side padding (don't let text touch
the screen edge — keep a gutter). Sidenotes fold to footnotes, breakout figures become full
width, the TOC moves from sticky-rail to a collapsible top block. The sibling
responsive-and-adaptive-layout owns the depth (clamp() fluid type, container queries); name
the transitions here. If a print stylesheet is needed, restore footnotes, expand link URLs,
and re-tighten leading for paper.
-
Run the scannability + reading checklist (below). Fix any failure before shipping.
When an AI tool proposes a viewport-wide body or three-column article, treat it as the convergent
mean to avoid, not as endorsement.
