Magazine layout

A magazine layout ranks its content. One story is the lead, and it says so with size: a bigger picture, a bigger headline, more of the page. Two or three items sit at a middle weight below or beside it, and a column of briefs runs down one side at the smallest weight the page has. Nothing about that arrangement is decorative. The composition is an editor’s judgement about what matters today, made visible before a single word is read, which is why the pattern is named after the medium that invented it.

The mechanism is visual hierarchy expressed as area and position rather than as columns. Mixed column widths matter (a lead spanning two tracks while the briefs take one is what makes the lead read as a lead) but the widths are a consequence of the ranking, not the point of it. In practice a magazine layout is built on a layout grid with items spanning different numbers of tracks, and the design work is deciding the steps: how much bigger the lead’s headline is than a second’s, how far down the scale the briefs sit, and where the reader’s eye is meant to land first and second.

The contrast worth drawing is bento grid, which also mixes tile sizes but ranks nothing: its tiles vary in shape to fit the content in each, and the composition reads as a set of equals. Flatten a magazine layout into equal tiles and you can watch what is lost, since the same six items now make the reader do the ranking the editor was supposed to have done. The related trap is having a hero and calling it hierarchy: one big thing at the top with an undifferentiated grid beneath it has a lead and nothing else, so the second and third tiers of the page carry no information at all.

Two cautions when the layout has to be responsive. Ranking by area only works while the areas are side by side, so a composition that collapses to a single column keeps its hierarchy through type size and order instead, which is what content choreography is about. And the pattern rewards real editorial input: a template with a lead slot, a seconds row and a briefs rail will produce a page that looks ranked whether or not the ranking is true, and readers learn to distrust it quickly. A magazine layout is a promise that somebody decided.