Marginalia Layout
also known assidenotes · Tufte layout · gloss layout
A wide margin column running alongside the main content, used for footnotes, sidenotes, or metadata.
Marginalia describes notes, glosses, or annotations placed in the margin of a text — a tradition going back to medieval manuscripts and codified by typographers like Edward Tufte. On the web, marginalia layout reserves a wide gutter (often 30–40% of the page width) for sidenotes, captions, or supporting links that sit beside the main column.
The pattern is favored by long-form publications, technical documentation (Tufte CSS, Gwern.net), and editorial sites that want to enrich without interrupting reading flow.
Medieval manuscript tradition. Modernized for the web by Edward Tufte's books and the Tufte CSS project (2014).
- Long-form articles, essays, technical documentation
- Reference material with citations or footnotes
- Editorial layouts that need to surface metadata
- Mobile-first apps — marginalia collapses awkwardly
- Pages with heavy imagery competing for attention
- +Use a smaller type size in the margin (75–80% of body)
- +Right-align margin notes if they sit on the right
- +Collapse margin notes inline on screens below 1024px
- −Don't put primary content in the margin
- −Don't use the margin for ads — readers ignore it
Textbook examples in the directory
An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content.
Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark.
Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.
People also ask
Are sidenotes better than footnotes?
For digital reading, yes — sidenotes don't break the eye's flow with a jump to the bottom of the page. They were Tufte's main argument in 'Beautiful Evidence'.