Skip to content
Oz Gultekin

All takes craft

7 min read 1,388 words

How AI Summaries Are Killing Visual Hierarchy

The composition that goes unread because the machine read first

The page that survives the summary is the page whose meaning depends on what the page chose not to say as much as what it did.

A reader arrives at a long-form essay through a summary on a generative search engine. The summary is three paragraphs. The reader scans it. The reader decides the essay is interesting enough to click through. The reader lands on the page. The first half of the essay is already in their head, in flattened form, before their eye has tracked across the first headline. The visual hierarchy the writer and designer crafted is doing a different job than the one it was designed for.

This is the new shape of how readers reach long-form content in 2025, and the design craft that surrounds long-form content is still adjusting to it. The adjustment is harder than it looks, because visual hierarchy is one of the oldest and most refined skills in editorial design, and it has been load-bearing in a way that is not obvious until the load shifts.

What visual hierarchy was actually doing

The craft of visual hierarchy assumes a reader who looks at the page directly. The reader’s eye lands somewhere, and the designer’s job is to choose where. The choice is made through typographic scale, weight, colour, spacing, alignment, proximity, and rhythm. A pull-quote that draws the eye away from the body. A headline that sets the temperature for the entire page. A subhead that promises a particular angle. A body paragraph styled in a way that signals the writer’s voice before the reader registers a single word.

These decisions were never decoration. They were rhetoric. A page with the same words and a different hierarchy is a different argument. The good designer knows this and uses the hierarchy to shape what the reader takes from the page in ways the writer’s text alone cannot achieve. The page is the composition. The text is one of the materials.

A reader who reaches the page through a summary has bypassed the composition. The summary is the text alone, processed and reissued without any of the material context. The designer’s rhetorical work has been read by the model, flattened, and discarded. The reader has the conclusion the model extracted, not the argument the page made.

This is not a small loss. For pages where the visual hierarchy was doing significant rhetorical work, the loss is most of the page’s contribution. The reader has the words. The reader does not have what the words were doing in the layout that surrounded them.

What the summariser keeps and what it discards

A summariser keeps the text content and the strongest cues about structure, like headings. It usually keeps lists. It sometimes keeps emphasis where the emphasis is signalled in the text itself rather than only in the styling. It discards almost everything else.

A pull-quote rendered in 32 point sans is, for the summariser, a paragraph of text. The summariser does not know it was rendered large, and even if it did, the model has no internal representation for “this sentence was visually weighted to be the most important sentence on the page.” The pull-quote that the designer chose to anchor the page is, in the summary, just one sentence among many.

A subhead that promised a particular angle is, for the summariser, a heading. The summariser may use it to structure the summary or it may ignore it. Either way, the angle the subhead signalled to the reader, the small turn of meaning that the subhead carried, is unlikely to survive.

A whitespace decision that gave the page room to breathe and the reader a chance to pause is, for the summariser, nothing. Whitespace does not exist for the model. The pause it engineered does not exist either.

A motion choice on the page, an animation that revealed a section in a particular way, an interactive element that let the reader explore at their own pace, is, for the summariser, completely absent. The summariser reads the static text. The temporal experience of the page does not factor in.

A typographic choice, like rendering the body in a serif that signals editorial gravity rather than a sans that signals informational utility, is, for the summariser, irrelevant. The text is the text.

The honest read is that the summariser keeps the literal content and discards the compositional intent. For some pages, this is fine. For others, it is most of what the page was for.

What designers can do, in the short term

A designer who cares about how the page survives the summary has a few practical moves available. None of them are complete answers, and most of them require giving up something the designer was not previously asked to give up.

The first move is to write more of the rhetorical work into the text itself. A pull-quote that the designer wanted to weight visually can be reinforced by writing the surrounding paragraph in a way that signals the importance of the sentence. The summariser is more likely to pick up the sentence if the text itself flags it. This is partly a writing job and partly a design job, and the two have to coordinate in a way they often have not.

The second move is to use semantic markup more deliberately. A pull-quote in a blockquote element, with a citation, is more likely to be recognised as significant by a model than a styled span with no semantic identity. A subhead in an h2 carries more weight than a styled paragraph. The semantic layer is the part of the design the model can read, and investing in it is investing in the model’s ability to keep more of the page’s intent intact.

The third move is to design for the reader who arrives directly differently from the reader who arrives through a summary. The directly arriving reader gets the full composition. The reader from a summary gets a page that opens with a brief restating of the angle, in case the summary missed it, and then proceeds into the long-form material. This reads as redundant if the reader has not seen the summary. It reads as essential if they have. Most pages can absorb this redundancy without feeling overwritten.

The fourth move, harder than the others, is to make the composition do work the summary cannot reproduce. A page that includes a chart, a diagram, an interactive element, or a sequence of images that make a visual argument cannot be flattened into prose without losing the argument. The reader who lands on the page sees something the summary cannot describe, and the page rewards the click. This requires more work and more skill, and it is the move with the highest payoff for pages that can support it.

The wrinkle about which pages this matters for

Not every page needs to survive a summariser, and not every designer should reorient their craft around the summary. A reference page, a how-to article, an FAQ, a documentation page, a product spec sheet, all of these are arguably better served by the summariser, because the user wanted the answer and the page was the path. A design page, an essay, a feature article, a portfolio piece, a personal site, all of these depend on the composition for most of their value, and the summary is a real loss.

The honest distinction is whether the page is content or composition. A content page is in service of an answer the reader can extract. A composition page is in service of an experience the reader has by being on the page. The first survives the summariser fine. The second has to do work to survive at all.

A designer should know which kind of page they are working on, and design accordingly. A team that treats every page the same will optimise content pages well and lose composition pages to the summariser. A team that distinguishes will give each kind of page the design attention it actually deserves, and the composition pages that matter most will be the ones that earn the click rather than the ones the summariser quietly absorbs.

The page that survives the summary is the page whose meaning depends on what the page chose not to say as much as what it did.

The summariser cannot read silence. The page that earns its silence still works.

Terms / explained

Described terms.

Visual hierarchy
The compositional craft of arranging a layout so that elements have a clear order of importance to the human eye, achieved through typographic scale, weight, colour, spacing, alignment, and proximity.
AI summary
A condensed representation of a longer piece of content, generated by a model that reads the original and produces a paragraph or list-form summary, often surfaced before or in place of the original page.
Flattened content
Content stripped of its compositional and typographic context, reduced to plain text or simple lists, in which the original ordering and emphasis cues are no longer present.
Compositional intent
The set of choices a designer makes about layout, spacing, and emphasis that carry meaning beyond the literal content of the page, often the part of design most affected when content is reduced to plain text.

FAQ / questions

Frequently asked.

What is visual hierarchy in design?

The craft of arranging a layout so the human eye finds the most important elements first, supporting elements next, and incidental elements last. Visual hierarchy is built from typographic scale, weight, colour, spacing, alignment, and proximity, and it is one of the oldest and most refined skills in graphic and editorial design.

How are AI summaries affecting visual hierarchy?

AI summarisers read the underlying text and reproduce it in a flattened form, usually as a paragraph or a bulleted list, that strips out the typographic and compositional decisions of the original. A reader who reaches the page through a summary has already absorbed a flattened version of its content, and the visual hierarchy of the page itself does less work than it used to. Designers who depended on hierarchy to do most of the rhetorical work have to find new ways to make the rhetoric land.

Should designers stop using visual hierarchy because of AI summaries?

No, but the role of hierarchy is shifting. For pages that will be read directly, hierarchy is as important as ever, perhaps more so as a way to differentiate the page from a flattened summary. For pages that will be reached primarily through summaries, hierarchy still matters but loses some of its load-bearing function. The honest design response is to treat the summary as one of the page's audiences and design accordingly, which usually means making the page's content survive both kinds of reading.

Ask / a model

Request an AI summary.

Hand this take to your model of choice for a summary, a deeper read, or a critique. Each link pre-fills a prompt that points the model at this page.

Read / further

Related reading.