vocab.design

layout

Gutenberg diagram

also called reading gravity (community), Gutenberg rule (community), primary optical area (community), terminal area (community)

A model splitting evenly weighted pages into four quadrants, with the eye falling from the primary area at top left to the terminal area at bottom right.

The diagram cuts a page into four quadrants and gives each one a name. The top left is the primary optical area, where a western reader’s eye lands without being asked. The top right is the strong fallow area and the bottom left the weak fallow area, both of them passed over. The bottom right is the terminal area, where the sweep finishes. Between the first quadrant and the last runs the axis of orientation, and the pull along it is what the model calls reading gravity: a series of left to right sweeps, each starting slightly lower than the one before.

Its scope is narrower than its fame. The diagram was set out by the American newspaper designer Edmund Arnold, who named it after Gutenberg, and it describes what happens on a page of evenly weighted material, which is roughly a broadsheet page or a text-heavy document with no strong hierarchy. That condition is doing all the work. Give the page one large image, one bright button, or one heading twice the size of everything else, and the eye goes there instead. The diagram is a description of a default, not a route the reader is obliged to take.

It is the third of three reading models and the three divide by density. The F pattern is what dense text produces, because there is enough material for the eye to sample line beginnings. The Z pattern is what a sparse layout produces, because there are only a few objects to bounce between. The Gutenberg diagram is for the case in between, a page evenly filled with material of similar weight, where nothing sticks out enough to redirect the gaze. Reaching for the wrong one of the three is usually a misreading of how dense the page is.

Used honestly it settles one question well: where does the last thing you want read belong? The answer is the terminal area, which is why a sign-up button, a next step, or a signature sits bottom right so reliably that the placement now reads as convention on its own. The mirror image of that is the useful warning. The two fallow corners are where attention is cheapest, so anything parked there is being deprioritised whether you meant it or not, and under a right to left script the whole diagram flips with the reading direction. Everything else is better decided by visual hierarchy, which overrules position whenever the two disagree.

Which word?

If you wantsay
placing the last thing you want readgutenberg diagram
predicting how a text heavy page gets skimmedf pattern

Related

See also: Visual hierarchy