Composition - Grid.

Page proportions

A page's proportion - its height-to-width ratio - defines the space in which everything else is set. It is the first decision of any layout. Four ratios dominate historically.

2:3 - simple harmonic proportion (ratio 1.5). Most medieval manuscripts and incunabula; Tschichold considered it the most stable base.

1:√2 (≈ 1.414) - German DIN 476 standard (1922), which became the international ISO 216 standard (A4, A3…) in 1975. Unique property: halving the sheet along its long side yields two sheets of the same proportion. A0 is 1 m² by construction (841 × 1,189 mm).

1:φ (≈ 1.618) - the golden ratio. Used in architecture and art since Antiquity; Tschichold reports its use in typography between 1550 and 1770.

US Letter (8.5 × 11 in, ≈ 1:1.294) - North-American standard (ANSI A), squarer than A4 or 2:3.

Standard worldwide document → A4 or √2 ratio. US market → Letter. Book, magazine, classical aesthetic → 2:3 or golden ratio. Square or panoramic format → a conscious choice, to be justified.

Margins - the Van de Graaf canon

The Van de Graaf canon is a precise geometric construction for placing the text block on a page. Described by J.A. van de Graaf in 1946 and popularised by Tschichold, who reports that the finest incunabula followed it - he calls it “the golden canon of page construction”.

For a page of proportion 2:3: inner margin 1/9 of the width, outer margin 2/9; top margin 1/9 of the height, bottom margin 2/9 - a margin ratio of 2:3:4:6 (inner : top : outer : bottom). The text block's height equals the page's width, and the block keeps the page's proportion.

Why the construction holds: the wider bottom margin anchors the text on the page; the wider outer margin leaves room for the hand and for breathing space; the text block centres on the page's optical core, not its geometric centre. The Argentine Raúl Rosarivo showed that the same construction follows from dividing the page into ninths - a technique he traced in the Gutenberg Bible.

Columns and modular grids

Josef Müller-Brockmann (1914-1996), a central figure of the Swiss International Style, formalised the modular system in Grid Systems in Graphic Design (1981): “The designer's work should have the clearly intelligible, objective, functional and aesthetic quality of mathematical thinking.”

Manuscript grid - a single column. Books, e-books, long PDFs; equivalent to the Van de Graaf text block.

Column grid - two to six columns separated by gutters. Magazines, newspapers, the web.

Modular grid - columns + rows forming a matrix of modules. Complex books, dashboards; Müller-Brockmann details grids of 8 to 32 modules.

Baseline grid - equidistant horizontal lines set on the leading. Text lines align across columns: a clean vertical rhythm.

Hierarchical grid - irregular, it follows the information hierarchy rather than strict geometry. Mostly on the web.

Technical vocabulary: module (base unit), gutter (space between columns or rows), flowline (horizontal line structuring the reading), hangline (top flowline where elements hang), baseline, spatial zone (group of adjacent modules), marker, folio, running header / footer.

The 12-column grid has been the web standard since Bootstrap: 12 divides into 2, 3, 4 and 6, so all common ratios fit in one grid.

Running text (book, report) → manuscript grid, 1 column, on a baseline grid. Mixed document (magazine, brochure) → modular grid, 2-3 columns. Complex document (catalogue, printable dashboard) → 4-6 columns. Web or interactive PDF → 12 columns, gutters in multiples of 8 or 4. Gutters: 16 px mobile, 24 px desktop, 1.5 em for text.

Visual hierarchy and focal points

The rule of thirds: divide the image into nine equal parts; the four intersections are the privileged positions for important elements. Three converging explanations: an off-centre focal point creates more dynamic tension than a centred one; it is also said that the eye returns there more readily, which studies only partly confirm; finally 1/3 ≈ 0.333 is a simple approximation of the golden section (0.382, i.e. 1 - 1/φ). A useful convention, not a law.

Creating a focal point: by contrast (size, colour, shape), by isolation (a lone element in an empty zone draws more than in a dense one), by convergence (lines pointing somewhere lead the eye there).

Symmetrical balance - mirrored distribution around an axis: calm, formal, static (certificates, official documents). Asymmetrical balance - non-mirrored distribution with balanced visual weight: dynamic, modern (magazines, posters, the web). Radial balance - elements radiating from a centre: focus, circular harmony (logos, centred dashboards).

Balancing visual weight in asymmetry - five levers: size (a large element balanced by a small, well-placed one), colour (a saturated zone balanced by a larger neutral one), texture (a complex pattern against a larger plain zone), position (an element high on the page weighs more than the same element low, according to Arnheim: the bottom of a balanced composition must carry more), direction (an element pointing into an empty zone perceptually “fills” it).

The six Gestalt principles (proximity, similarity, continuity, closure, figure/ground, common fate) govern perceptual grouping - to group, apply proximity before similarity. They are covered in depth in the Perception pillar.

Formal corporate document → symmetrical balance, central focal point. Editorial document → asymmetrical balance, focal point on a thirds intersection. Infographic, dashboard → radial or modular balance, central focal point.

Symmetry, asymmetry and the Swiss style

Tschichold published two opposing books: Die neue Typographie (1928), the manifesto of modern asymmetry - grid, sans-serif, ranged left - then, from the 1930s on, a return to classical principles, gathered in The Form of the Book (1975 collection) - Van de Graaf canon, harmonic margins, serif, justification. This tension is the central axis of the twentieth-century debate. Tschichold's own resolution: asymmetry suits short formats (posters, brochures), symmetry suits long ones (books).

The Swiss Style (Zurich, Basel, 1940s-50s - Müller-Brockmann, Hofmann): sans-serif typography (Helvetica, Akzidenz, Univers), asymmetric ranged-left alignment, a rigorous grid as invisible structure, black-and-white photography integrated into the grid, no ornamentation, hierarchy through size and weight rather than decoration.

“Formal classical document” → symmetry, justification, serif. “Modern dynamic document” → ranged-left asymmetry, sans-serif, visible modular grid. “Editorial magazine” → asymmetry with images breaking out of the grid, headlines spanning columns. “Corporate document” → moderate asymmetry, visible but unassertive structure.

The Modulor

An anthropometric scale of proportions developed by Le Corbusier (Le Modulor, 1948; Modulor II, 1955) to unify architecture, furniture and design from the human body and the golden ratio. Two starting measures - standing man 1.83 m, raised arm 2.26 m - generate two geometric series through φ: the red series (… 0.43 → 0.70 → 1.13 → 1.83 → 2.96 …) and the blue series (… 0.53 → 0.86 → 1.40 → 2.26 → 3.66 …).

The Modulor targets architecture, but its logic generalises to the document: choose a base dimension, multiply and divide by a constant ratio, and have every dimension (text sizes, spacings, heights) follow that geometric scale. This is precisely the logic of modern modular typographic scales.

Two documented criticisms: a cultural bias (the reference stature privileges a 1.83 m Western man; contemporary designers cross φ with broader anthropometric data) and a questionable application (Le Corbusier sometimes applied the system retrospectively). This does not invalidate the principle of a harmonic geometric scale - but it warns against turning it into dogma.

Building a modular scale: choose a base size (16 pt web, 11 pt print), choose a ratio (φ 1.618, √2 1.414, octave 2), generate the scale. Base 16, ratio φ: 6.1 → 9.9 → 16 → 25.9 → 41.9 → 67.8. Base 16, ratio 1.5: 7.1 → 10.7 → 16 → 24 → 36 → 54. The scale structures headings, vertical spaces, element heights.

Structural elements

A long document carries recurring elements: folio (page number), running header, running footer, marker (section indicator in the margin), page break, caption, sidebar, pull quote.

Two lines structure the vertical rhythm (Müller-Brockmann): the hangline, the top line of a module where elements hang, and the baseline, on which the letters sit. Folio conventions: bottom outer (classic books), bottom centred (magazines), top outer (technical works). Tschichold's convention: the folio lives in the bottom margin - the widest - outside the text block, preserving the block's integrity.

Formal reference document: folio in the bottom margin, outer side, 9-10 pt, body typeface; running header in the top margin, outer side, 9-10 pt, italic or small caps; systematic page break at chapter openings; caption below the image, 9 pt, italic; sidebar aligned on the grid, separated by a gutter or a rule.

Modern adaptations - 8pt, tokens, responsive

The 8pt system is the de-facto standard of digital interfaces: every dimension and spacing is a multiple of 8 (8, 16, 24, 32, 40, 48…). Five documented reasons: screen-size compatibility (no half pixels), retina scalability (×2, ×3 stay integral), visual consistency (a finite set of values reduces arbitrariness), design-development communication, and Google's recommendation (Material Design).

Variants: 4pt system (fine granularity), linear 8pt (constant increment), modular 8pt (8, 13, 21, 34, 55 - multiplication by φ), hybrid 4pt baseline + 8pt spacing. Design tokens (Salesforce, around 2014-2015) give symbolic names to values - spacing-md = 16 px, font-size-h2 = 24 px - guaranteeing consistency and cascading changes.

The 12-column grid adapts to breakpoints: large desktop (1440 px+) 12 columns, 60 margins, 24 gutters; standard desktop 12 columns, 40 margins; tablet (768-1024) 8 columns, 32 margins, 16 gutters; mobile (320-768) 4 columns, 16 margins. Finally, hard grid (elements locked to grid lines) versus soft grid (multiples of the base unit without locking): modern design systems prefer the soft grid for its flexibility.

Modern screen-first PDF: base unit 8 pt; vertical spacings in multiples of 8; gutters 16 or 24 pt; text sizes on the modular scale with line-height in multiples of 4 or 8; interactive elements: at least 44 pt (Apple) or 48 dp (Material).