011 min
The problem the Gutenberg diagram solves
Picture a designer laying out a one-page printed report. The page holds a title, a logo, three paragraphs, a photo and a line with a phone number. Nothing on it is larger, darker or brighter than anything else. So where should each piece go?
A designer who guesses might put the phone number at the top and the title near the bottom. Readers still look at the page, but they meet its parts in an order nobody chose. Some may never reach the phone number at all. The designer needs a rule for where readers look first, where they finish, and which corners they skip.
021 min
Where the Gutenberg diagram comes from
Such a rule was written down by Edmund Arnold, an American typographer and newspaper designer. Arnold is credited with the Gutenberg diagram and is said to have developed it in the 1950s. His work was newspapers, which are pages built mostly from columns of text, and he later taught design at Syracuse University.
The name is a tribute, not a history. Johannes Gutenberg printed with movable type in Europe in the 1400s, and he had no part in the diagram. Designers also call the idea the Gutenberg rule, and one major design reference lists the Z pattern of processing as a third name. That last name causes confusion, and a later section separates the two.
032 min
How the Gutenberg diagram works
The diagram divides a page into four equal quadrants. The top left is the primary optical area, where a reader's eyes arrive first. The bottom right is the terminal area, where they finish. The other two corners lie off the line between those points. The top right is the strong fallow area and the bottom left is the weak fallow area. Fallow means unused: both areas get little attention unless something in them is made to stand out.
| Area | Position | What the diagram predicts | What the report designer puts there |
|---|---|---|---|
| Primary optical area | top left | The first look | The title and the logo |
| Strong fallow area | top right | A little attention, since the sweeps run toward it | A date or a short note |
| Weak fallow area | bottom left | Rarely noticed | Fine print |
| Terminal area | bottom right | The last look, where the eyes finish | The phone number |
Something has to move the eyes along that line. The diagram calls it reading gravity: the habit, built by years of reading, of moving left to right and top to bottom. The eyes cross the page in a series of sweeps. Each sweep starts on an axis of orientation, which is a horizontal line made by aligned text or aligned objects, and moves to the right. Each new sweep starts a little lower, so the eyes drift from the top left toward the bottom right. The names strong and weak follow from this. The sweeps run toward the top right, so it is likelier to be noticed, and the eyes move away from the bottom left.
Why the eyes move in sweeps
A sweep is not smooth. In 1879 the French eye doctor Louis Émile Javal watched readers' eyes in a mirror and found that they move in a series of separate jumps. He named the jumps saccades. Between two jumps the eyes stop for a moment, and each stop is a fixation. A sweep across a page is therefore a chain of jumps and stops. Eye tracking is the method that records where the stops fall, and every measurement later in this article is a count of fixations.
041 min
The Gutenberg diagram in two advertisements
A copywriting studio called Tales Content uses two magazine advertisements to show the diagram at work. The first is for Hylas yachts. The Hylas advertisement in the January 2001 issue of Cruising World places its headline far down the page, at about three-quarters of its height. A reader starts at the headline, since that is where reading starts, then follows reading gravity to the builder's logo. The advertisement ends there, and the large area above the headline has done no work.
The second is a Rolls-Royce advertisement with a headline written by David Ogilvy. In the studio's description, the eyes start at the picture, move down to the headline and a smaller sub-headline, and then reach three columns of body text. Each element sits below the one before it, so reading gravity and the layout push the same way.
Wheildon's tests of comprehension
The studio leans on Colin Wheildon, an author on type and layout. Wheildon ran tests with 224 people, who read marketing messages set in different typefaces and layouts. The studio's summary says that text laid out with good reading gravity was understood about twice as well as text laid out against it. Wheildon's book is not freely available, so this article relies on that summary. It should be read as a reported finding, and the next section explains why it needs care.
052 min
What evidence supports the Gutenberg diagram
The advertisements show the diagram applied, but they do not show that it is true. William Lidwell, Kritina Holden and Jill Butler describe the diagram in their book Universal Principles of Design, and they are direct about this. They write that there is little empirical evidence that following the diagram improves reading speed or understanding. Wheildon's tests are the main exception, and they are known only through a summary.
The best-known eye-tracking work on web pages describes a different shape. In 2006 the Nielsen Norman Group, usually shortened to NN/g, tracked the eyes of 232 users across thousands of web pages. The most common pattern was F-shaped: two horizontal stripes followed by one vertical stripe down the left side. That is not the diagonal the Gutenberg diagram predicts.
Attention leans left
NN/g later measured how attention divides between the two halves of a screen. It gathered data from more than 120 participants in 2017. People looking at general web pages spent 80% of their fixations on the left half of the screen, compared with 69% in its earlier measurement. In that study 80% of eye fixations landed on the left half of the screen and 20% landed on the right half. This supports the weight the diagram gives to the left side. It also suggests that the strong fallow area is weaker on the web than the diagram implies.
When people scan instead of read
A pattern also depends on how the text is formatted. NN/g's 2019 review of its own eye-tracking work reports that F-pattern scanning appears when a page has no subheadings and no bullets. Readers then fixate on the beginnings of lines near the top of the page. This corrects a common misreading: the F is not how people naturally read, but what they do with unformatted text. The same review calls the layer-cake pattern, where readers fixate mostly on headings and subheadings, by far the most effective way to scan. On a page with clear headings, people read by headings, whichever corner the headings sit in.
Readers of right-to-left languages
Reading gravity is a habit, so it follows the direction in which a person reads. The description by Lidwell and colleagues is about Western readers. NN/g's 2019 review includes the gaze plot of a participant scanning an Arabic website, and it shows a reversed F-pattern. A mirrored diagram is the reasonable expectation for right-to-left layouts, although none of the studies in this article tested that.
062 min
When the Gutenberg diagram stops predicting
Even for readers of left-to-right languages, the diagram applies in few conditions. Lidwell and colleagues limit it to pages of heavy text, evenly spread content and blank displays. In every other case, they write, the weight of the elements and their layout direct the eyes. Their own example is a newspaper with a very heavy headline and photograph in the middle: the middle becomes the primary optical area.
The same happens to the designer's report. Add a full-width photo across its middle, and the photo is now the first place readers look. The diagram no longer says where the title should go. Visual hierarchy, the order in which size, weight and contrast pull attention, has replaced reading gravity.
Familiar pages
Readers who return to the same page learn it. People who see the same layout often look first at the parts that change, such as new stories, rather than the parts that stay the same, such as a newspaper's title. A masthead in the primary optical area therefore does not guarantee a look from regular readers.
Pictures
A photograph or painting is not a block of text. When a natural scene appears on a screen, observers first move their eyes toward its centre. Researchers call this the central fixation bias, and Lars Rothkegel and colleagues studied how it fades over time. A page dominated by a picture therefore starts in the middle, not in the top left.
Phones and chat
On a phone, a page is one narrow column, and a chat is a single stream running downward. In both there is almost no top right or bottom left to speak of, so the quadrants lose their meaning. None of the studies in this article tested the diagram on a phone, so this is a reasoned limit and not a measured one.
071 min
Gutenberg diagram vs. the Z-pattern and F-pattern
The Gutenberg diagram is easy to confuse with two patterns that sound alike. The Z-pattern describes a route that crosses the top, runs diagonally down to the left and crosses the bottom. The F-pattern is the shape NN/g found on web pages with unformatted text. Lidwell and colleagues give the Z pattern of processing as another name for the Gutenberg diagram, so the two terms are often treated as one. They are close but not identical.
| Pattern | Shape | Where it comes from | What it does with the top-right and bottom-left corners |
|---|---|---|---|
| Not in the library yetGutenberg diagram | |||
| DesignZ-pattern | |||
| DesignF-pattern |
The one axis that separates them is what each says about the corners off the diagonal. If the corners matter to the design, look at which pattern the page really follows before choosing a layout.
082 min
Using the Gutenberg diagram on a page
Back to the designer's report. The page is plain text, so the diagram applies. The designer puts the title in the top left and the phone number in the bottom right. The paragraphs fill the space between them, so a reader who follows reading gravity passes through all of it.
The same moves work on other pages:
- Put what a reader must see first in the primary optical area and the action you want in the terminal area. Clicks and Clients, a web marketing firm, suggests a logo or value statement in the first and a call to action in the second.
- Use the weak fallow area for supporting material. A poster-design blog called Better Posters suggests the lower-left zone for methods on a research poster.
- If an important item has to sit in a fallow corner, give it emphasis. Space around it and contrast with its surroundings, as in whitespace, pull attention that the position would not.
- Test the layout with real readers. Show the page to people like your audience and ask where they looked first and last, or run two versions and compare how many people act.
Before applying the diagram, ask one question: is this page mostly even text? If it is, put the first thing in the top left and the last thing in the bottom right, then check with readers. If it is not, plan the visual hierarchy first and treat the diagram as a tiebreaker for what is left.
?3 questions
Questions people ask
Should every logo go in the top left?
Can I use the Gutenberg diagram for a poster?
How do I check whether my layout follows the diagram?
§10 sources
Sources
William Lidwell, Kritina Holden and Jill Butler, Universal Principles of Design, revised and updated edition (Rockport), entry "Gutenberg Diagram" (copy hosted on a university course page).
Wikipedia, "Edmund Arnold".
Tales Content and Copywriting, "Part 1: Reading Gravity: Where to Place Important Information" (a summary of Colin Wheildon's tests), 2018.
Jakob Nielsen, "F-Shaped Pattern For Reading Web Content (original eyetracking research)", Nielsen Norman Group, 2006.
Show all 10 sourcesShow fewer sources
Therese Fessenden, "Horizontal Attention Leans Left", Nielsen Norman Group, 2017.
Kara Pernice, "Text Scanning Patterns: Eyetracking Evidence", Nielsen Norman Group, 2019.
Wikipedia, "Eye movement in reading" (on Javal and saccades).
Lars Rothkegel, Hans Trukenbrod, Heiko Schütt, Felix Wichmann and Ralf Engbert, "The temporal evolution of the central fixation bias in scene viewing", arXiv preprint, 2016.
Clicks and Clients, "Gutenberg Diagram For Your Homepage Design".
Better Posters, "Reading gravity", 2016.
