From top-left to bottom-right.
On evenly weighted pages the eye sweeps from top-left to bottom-right. The Gutenberg principle maps that reading gravity — and where to put what matters.
Divide a page into four quadrants. The eye enters at the top-left (Primary), sweeps diagonally past the two "fallow" areas (which get less attention), and exits at the bottom-right (Terminal) — the natural resting place for a call to action.
The top-left quadrant — where the eye lands first when no other visual cue grabs it. In Western reading cultures, this is where headlines, logos, and identifying brand marks belong by default.
The top-right quadrant receives meaningful but reduced attention. Content here is glanced at, not read. A common spot for navigation, search, or supporting hero imagery.
The bottom-left quadrant gets the least attention of all four. The eye sweeps past it on the way down and to the right — for many users, content placed here may as well not exist.
The bottom-right quadrant is where the eye rests after sweeping across the page. It's the natural place for a call to action — the eye literally ends up here, ready for the next step.
The diagonal pull from Primary to Terminal. Reading gravity is the default — what happens when no other visual hierarchy interrupts the sweep. Reinforce it with content that supports the journey.
The perpendicular line, from top-right to bottom-left, is the axis the eye actively resists. Crossing it costs effort — which is why content placed in the fallow corners gets so little attention.
The Gutenberg Principle describes a default reading pattern — what happens with evenly distributed, visually homogeneous content. Newspaper-style layouts, prose-heavy pages, dense documents.
Any strong visual element overrides reading gravity. F-pattern or Z-pattern emerge in their place. Most modern web pages — with images, buttons, and varied type — break Gutenberg entirely.
Where the diagram still applies: editorial layouts, newsletters, dense article pages, terms of service, and any composition that needs to feel formal and traditional. Put the byline top-left, the CTA bottom-right, and let gravity do the rest.
A conversation has no quadrants — when the answer is returned directly, the four-zone reading model gives way to a single vertical stream.
A conversation is a single vertical column with no Primary or Terminal zones. Reading gravity flattens into a simple top-to-bottom stream of turns.
When AI returns the answer directly, there’s often no page to lay out at all. The four-quadrant diagram gives way to a single, generated response block.