Canons of Page Construction

The margins that scribes measured.

The classical margin and text-block ratios behind readable page layouts. A text block in the page’s own proportion, an inner margin narrower than the outer, a foot deeper than the head: rules reconstructed from medieval manuscripts that still make a reading screen feel composed.

Origin

The oldest surviving diagram is a sketch by the thirteenth-century builder Villard de Honnecourt that divides a page by diagonals. Jan Tschichold measured the text blocks of medieval manuscripts and, in a 1953 essay later collected in The Form of the Book, reconstructed what he called the golden canon: a page of 2:3, a text block in the same proportion with its height equal to the page width, and margins in the ratio 2:3:4:6.

Others reached the same geometry by other roads. J. A. van de Graaf published a diagonal construction in 1946 that works for any page shape, and Raúl Rosarivo derived a ninths-based version from Gutenberg’s Bible in 1947. On screens there is no gutter and no facing page, but the habit of a text block narrower than the viewport, set in a deliberate proportion, is the same idea.

The Rule

Give the text block the page’s own proportion and place it off center: inner margin narrowest, then head, then outer, then foot, in the ratio 2:3:4:6. The block’s height equals the page’s width, so text and page share one geometry and the eye reads the page as composed.

Origin
Source
The Form of the Book
In practice
A reading column in the page’s proportion
When to Use
How to Use
Proportion 01 / 10

The 2:3 Page

Tschichold’s reconstruction starts from a page two units wide and three tall, with a text block in the same 2:3 shape. When block and page share a proportion, the margins fall into place by construction rather than by taste.

Best for
Long-form pages
Use when
The page shape is fixed
Avoid when
The viewport changes constantly
Construction 02 / 10

The Van de Graaf Canon

Draw the diagonals of the spread and of each page, connect the crossing points, and the text block appears with margins of one ninth and two ninths. The construction needs no numbers, which is why scribes could use it.

Best for
Print and PDF
Use when
Facing pages exist
Avoid when
There is no spread
Margins 03 / 10

2 : 3 : 4 : 6

Inner, head, outer, foot. The inner margin is smallest because two of them meet at the spine and read as one; the foot is largest because a block that sits low on the page looks like it is falling off. The same instinct applies to a card: more space below the text than above.

Best for
Cards and panels
Use when
Text sits inside a frame
Avoid when
Optical centering is handled elsewhere
Measure 04 / 10

The Reading Column

The canons assume a single column of 45 to 75 characters per line. On screens, the text block becomes a max-width: about 60 to 70 characters of body type, centered or set off center, with the rest of the viewport left as margin rather than filled.

Best for
Articles and docs
Use when
People read for minutes
Avoid when
The screen is a tool, not a page
Screens 05 / 10

No Spine, No Gutter

A screen has no facing page, so the inner margin loses its reason and the block can sit symmetrically. Keep the other asymmetry: more space below the text than above, and a head margin that grows with the viewport rather than staying pinned to the top.

Best for
Web reading views
Use when
Adapting print rules
Avoid when
Copying the book layout literally
Rhythm 06 / 10

Margins from the Type

The canons measure margins in fractions of the page, but a screen has no fixed page. Measure them in the type instead: a head margin of two or three line heights, a foot of four, gaps between sections in whole lines. The proportion survives; the ruler changes.

Best for
Design systems
Use when
Spacing tokens exist
Avoid when
Type size varies per component
Screens 07 / 10

Reading Mode

Browser reader views, e-book apps, and documentation sites are the canons in modern dress: one column, generous margins, a measure set by the type. Where a product has a reading mode, apply them there and let the rest of the interface be dense.

Best for
Reader views
Use when
Content is prose
Avoid when
Content is a table or a tool
Judgment 08 / 10

When to Fill the Page

Dashboards, editors, tables, and maps are working surfaces, not pages to be read. There the canons give way to density and edge-to-edge layouts; a manuscript margin around a spreadsheet only wastes the screen.

Best for
Working surfaces
Use when
Density is the goal
Avoid when
People are reading, not operating
✦

Page Canons in the Age of AI

Generated documents and answers arrive as text with no page around them; the canons are how a product gives that text a page.

✦ AI Era 09 / 10

A Page for the Answer

Long model answers read better in a measured column with real margins than in a chat bubble stretched across the window. When an answer becomes a document, switch it into a reading layout built on the canons.

Shift
Bubble → page
Use when
Answers run long
Watch for
Chat chrome around an essay
✦ AI Era 10 / 10

Generated Layouts That Know the Page

A model laying out a report or a slide can be given the canons as constraints: block in the page’s proportion, foot deeper than head, measure of 60 to 70 characters. The output stops looking like text poured into a box.

Shift
Poured text → composed page
Use when
Generating documents
Watch for
Margins that ignore the type size
Further Reading