← Journal/02 / 23

Layout

The Ogilvy Layout on a Modular Grid: Structuring the Visual-Headline-Copy Sequence

·5 min·PagePerfect Journal

David Ogilvy tested thousands of advertisements and arrived at a layout formula: large photograph at the top, headline below the image, body copy beneath the headline set in serif type, logo at the bottom right. This sequence outperformed every alternative arrangement his agency tested. But Ogilvy never specified how to proportion these elements relative to one another. The Swiss modular grid does exactly that — and the combination of Ogilvy's empirical sequence with Brockmann's proportional system produces a layout methodology grounded in both data and geometry.

The Ogilvy Sequence and Its Evidence

In "Ogilvy on Advertising," the layout prescription is specific. The image occupies the top of the page because the readership research of the period, the Starch and Gallup scores Ogilvy leaned on, showed that readers enter a layout at the dominant visual element. The headline sits directly below the image because the reader's eye, having been arrested by the photograph, drops naturally to the first line of text beneath it. Body copy follows in a logical continuation of downward reading gravity.

Ogilvy reported that this arrangement consistently outperformed layouts where the headline preceded the image or where copy wrapped around a centered visual. The numbers varied by campaign, but the principle held: the eye follows a top-to-bottom path, and the layout should honor that path rather than fight it. Ogilvy's own figures were modest but consistent: a headline set below its illustration was read by about ten per cent more people than one set above it.

The Modular Grid as Proportional Engine

Muller-Brockmann's modular grid divides the page into a matrix of cells. A common configuration uses a 4-column, 6-row grid on an A4 or US Letter page. Each cell is a fixed rectangular module; elements snap to cell boundaries. The key insight is that the grid does not dictate what goes where — it dictates the proportional relationships between elements.

When you map the Ogilvy sequence onto a modular grid, you gain something Ogilvy's formula lacked: a repeatable proportional system. The image might span four columns and three rows (50% of the page area). The headline occupies one row across all four columns. The body copy fills the remaining two rows in a two- or three-column configuration. Every proportion is derived from the grid rather than from visual intuition, which means it can be reproduced consistently across hundreds of pages without degradation.

Column Width and the Reading Corridor

The grid also solves one of Ogilvy's unspoken problems: column width. His advertisements ran in newspapers and magazines with predetermined column measures. But when designing standalone pages — book interiors, reports, proposals — the designer must choose a column width. Bringhurst's recommendation of 45 to 75 characters per line becomes a constraint that the grid must satisfy.

On a 6×9-inch page with 1-inch margins, a single column of 11-point Garamond produces roughly 68 characters per line — well within the optimal range. A two-column layout on the same page yields approximately 32 characters per line — too narrow for sustained reading, though effective for captions and subsidiary text. The grid allows you to calculate these values in advance and assign column configurations to each element type: full-width for body copy, half-width for pull quotes, quarter-width for marginal notes.

Vertical Rhythm and the Baseline Connection

The horizontal divisions of the modular grid align with the baseline grid — the set of evenly spaced horizontal lines to which every line of text adheres. In a layout with 12-point body type and 14.4-point leading (120%), the baseline grid repeats every 14.4 points. Headings, subheadings, and block elements must begin and end on these baseline increments, ensuring that adjacent columns of text align horizontally.

This vertical rhythm is what separates professional typesetting from desktop publishing. When baselines align across columns, the page acquires a visual coherence that readers perceive as authority and care — even if they cannot articulate why. Miles Tinker's "Legibility of Print" documented that consistent leading reduces eye fatigue and increases reading speed, a finding that baseline grids enforce automatically.

The Actionable Rule

Map the Ogilvy sequence — visual, headline, body copy, identification — onto a modular grid with no fewer than four columns and six rows. Assign the dominant visual to the top 40% to 60% of the grid. Set the headline in a display face spanning the full grid width. Flow body copy in columns whose character count falls between 45 and 75. Align every element to the baseline grid.

This is not a style. It is a system. It produces layouts that are empirically persuasive (because the sequence is tested) and proportionally sound (because the grid enforces consistency). The result is a page where every element occupies its position for a reason that can be defended with data.

Further reading