№ 00 Digital Transformation · Long Read
How This Site Sets a Long-Form Essay
A walkthrough of the prose components this site uses—sidenotes, footnotes, callouts, citation cards, figures, numbered headings, data tables—and the structural argument each one lets a writer make.
A long-form essay on the web isn’t a column of paragraphs—it’s a series of structural decisions about what counts as a chapter, what counts as a tangent, what counts as a citation, and what counts as a quietly important fact. The page owes those distinctions back to the reader. This site makes them with about a dozen components—most earn their place by giving the writer a way to say this isn’t the main argument; here’s what kind of thing it is instead.
Acronyms like GDPR and WCAG shrink to small caps when they appear in body prose so they stop shouting at the reader every time they show up.
The Margin Earns Its Keep
Most asides should be sidenotes, not parentheticals, and not “(but see section II)” inline. A parenthetical interrupts the sentence; a sidenote sits beside it.
The sidenote pulls into the right gutter at 1100 px and up, and stacks inline beneath the paragraph at narrower widths. That’s the cost—it isn’t a perfect tool on a phone. The benefit is a reader who never has to leave the line they’re reading.
When the figure carries the argument rather than illustrating it, a wider variant breaks out of the prose column into the wider essay column:
A graph-paper background sets a different reading mode—it tells the reader “schematic,” not “photograph”—and the variant exists for diagrams that should read as technical:
Chapters Earn the Number
A numbered heading is a promise: the essay really is in three or four movements, and the writer will deliver them in order. Use it sparingly. Mixing numbered and plain headings inside one essay is fine—the badge marks the spine, the plain heading marks the joints.
IAn Example Chapter
A Roman numeral on the eyebrow line pulls the reader through with structural intent. It also commits the writer—a chapter II had better follow.
A Plain Section Heading for Comparison
Plain Markdown ## headings render with the same display-serif
treatment without the numeric badge. Most section breaks should use
these. The numbered heading is a stronger structural claim, and
structural claims should be earned.
The Source, the Aside, and the Update
Three different things, three different components.
For a single anchor reference—the standard the essay leans on, the report it cites—a citation card carries more weight than a footnote and more context than an inline link:
A citation buried inside the flow—a passing source the reader doesn’t need to leave the paragraph for—rides on a footnote instead.1 Kramdown auto-appends the return arrow to the foot of each footnote so the reader can scroll back without losing their place.
A Pull Quote Worth the Page
A pull quote earns its weight when one sentence in the essay carries the argument and the reader benefits from seeing it twice. Two per long-form is plenty. More than that and the page reads like a quote-bait social thread.
Things That Should Not Wrap
Tables and code don’t follow prose rules. Numeric tables get tabular
figures (each digit takes the same column-width), an uppercase sans
header, and per-cell class="num" for the columns that hold counts or
money:
| Type | Variants | Used per essay |
|---|---|---|
| Sidenote | 1 | 2 |
| Footnote | 1 | 3 |
| Pull quote | 1 | 1 |
| Callout | 4 | 1 |
| Figure | 3 | 2 |
Code blocks render in the dark plate by default. The labelled variant adds an uppercase language tag in the corner, which earns its place when the language matters to the reader scanning the page:
yamlpermalink: /:title/
That single line is what publishes this post at
/how-this-site-sets-a-long-form-essay/ instead of
/blog/2026/05/09/....
Why Bother
The honest answer is that a typographically careful page treats the reader’s attention as the scarce resource it is. Footnotes for citations, sidenotes for tangents, callouts for the four kinds of “look here,” figures with captions and credits, tables with tabular figures—every one of these decisions is a small accommodation. They add up to a page that respects the time the reader gave it.
The contributor reference for every component is in
docs/prose.md.
Future essays here will use them; this one is the worked example.
-
Robert Bringhurst’s The Elements of Typographic Style sits behind every choice in this list. The book is from 1992 but the principles are older. Return
