Designing an Editorial Layout
Editorial typography is the craft of giving long-form prose a rhythm, a visual energy, and a reason to be read in print rather than on a screen. It asks more of the designer than any other document type — and returns more.
- What editorial design is and what it asks of the designer
- Article headers: kicker, headline, dek, byline
- Pull quotes: three approaches and when to use each
- Image-text integration in a printed feature spread
There is a difference between typesetting and editorial design, and it is not primarily a question of skill or complexity. Typesetting serves the text. Editorial design frames it — gives it a visual character, a sense of occasion, a physical presence on the page that makes the reader feel that this particular piece of writing is worth the effort of attention. A well-typeset document is easy to read. A well-designed editorial layout is compelling to read. The distinction matters because editorial documents — magazines, journals, anthologies, institutional publications — compete for attention in a way that books and reports do not. A book expects to be read. A magazine must earn it, spread by spread, from the moment it is opened.
This chapter builds an editorial layout from the structural elements that editorial typography has developed over two centuries of printed periodicals: the article header with its hierarchy of kicker, headline, dek, and byline; the pull quote as visual anchor and reading incentive; the integration of image and text across a feature spread; and the typographic conventions that give editorial prose its particular energy. Each element is demonstrated live, with the CSS that produces it, so that you can see not only how it looks but how it is built.
· · ·What editorial design asks Energy, contrast, and the hierarchy of attention
The fundamental difference between editorial typography and the other document types in this part is the role of visual contrast. In a book, contrast — between body text and headings, between text and white space — is managed to be as transparent as possible. The reader should not notice the contrast; they should simply find the text easy to navigate. In a report, contrast is functional: it directs attention to data, separates argument from evidence, signals hierarchy to the skimming reader. In editorial design, contrast is expressive. It creates energy, establishes personality, and gives the reader a reason to keep turning pages.
This expressiveness must be disciplined. A magazine spread with too many competing visual elements — a large image, a pull quote, a kicker, a display headline, a drop cap, a sidebar, all at maximum visual weight — is not energetic; it is chaotic. The designer's job is to orchestrate these elements into a composition where each has its role and none competes with the others. A large image commands attention first. A display headline commands it second. The dek — the introductory paragraph under the headline — converts that attention into reading engagement. The body text carries the argument. The pull quote, if one is used, provides a visual rest point and an incentive to continue past the point of tiredness. This sequence is not arbitrary. It follows the reader's natural path through a spread, from the first glance to the sustained engagement.
The choice of typefaces for editorial work matters more visibly than in other document types. Where a book typeface is judged primarily on its reading performance at body size over many pages, an editorial typeface is also judged on its display performance — how it looks at very large sizes, whether it has the personality and distinctiveness that makes a headline feel like a statement rather than a heading. Some typefaces that are excellent for book work — beautifully proportioned, quiet, unassuming at text size — are too retiring at display sizes for editorial use. Others are too assertive at text size but magnificent at display. The best editorial typefaces perform across the full range, but they are rarer than the specialists.
Figure 22.1 — Elements of a feature spread. Left page: full-bleed photograph occupying the upper two-thirds of the page, with a caption overlay at the foot. Right page: the article header hierarchy — kicker (section label), display headline, dek (introductory paragraph), byline — followed by two-column body text interrupted by a spanning pull quote. Each element has a distinct typographic weight and role in the reading sequence: the image attracts attention, the headline makes a claim, the dek explains it, the byline establishes authority, the body delivers the argument.
The article header Kicker, headline, dek, and byline
The article header is the most codified element of editorial typography, and also the most flexible. Its four components — kicker, headline, dek, and byline — appear in virtually every professionally edited magazine and journal, but their arrangement, relative sizes, and visual relationships vary enormously between publications. What is consistent is the hierarchy: the kicker is the smallest and quietest, the headline the largest and loudest, the dek somewhere between the two in size and weight, the byline a secondary element after the textual hierarchy is established.
The kicker (sometimes called a rubric or standfirst label) is a short line above the headline that identifies the article's section, category, or series. It is set in the UI typeface, at a small size, in small capitals or tracked uppercase, and in a secondary color — often the publication's accent color. Its function is navigational: it tells the reader which part of the publication they are in before they read the headline. In an issue of a nature journal, the kicker might read "Climate Science." In a policy review it might read "Urban Development." In a literary magazine it might read "Essay."
The headline is the display element — the largest type on the page, set in the primary display typeface at a size that commands immediate attention. Headline size varies by the importance and length of the article and by the compositional requirements of the spread. A short, memorable headline can be set very large; a longer headline must be set somewhat smaller to fit the column width, or broken across multiple lines in ways that preserve the grammatical units rather than breaking arbitrarily. A headline that breaks between an adjective and its noun, or between a verb and its object, creates a momentary reading confusion that no amount of visual drama can compensate for.
The dek (also called the standfirst or subheading in British usage) is a short paragraph between the headline and the byline that summarises the article's argument or establishes its context. It is the second thing a reader evaluates when deciding whether to read the piece: the headline makes a claim, the dek elaborates it just enough to clarify the claim without giving away the answer. Dek type is typically set in the body typeface at a slightly larger size than the body text — at the --text-md size in the project scale — in italic, and in a slightly lighter color than the body text to distinguish it from the prose.
The byline follows the dek and identifies the author. In a standalone article it typically includes the author's name and a short description of their role or affiliation. In a publication with photographs, it may include a small portrait. The byline should be visually quiet — it is information, not argument — and should mark a clear transition between the header apparatus and the body text.
The Forest Returns: How European Cities Are Reclaiming Their Canopy
After two decades of loss, a growing coalition of municipal governments is proving that urban tree cover can be not merely preserved but restored — and that the benefits go well beyond shade.
The first thing you notice about the Marianské Náměstí district of Brno on a warm July afternoon is not the heat, though at 34 degrees it is conspicuous enough. It is the absence of shade — the bare expanse of paving that radiates it back at you, the trees that should be here but aren't, the quality of light that belongs to a desert rather than a Central European city. Then you turn a corner onto Hybešova and the temperature drops two degrees in fifty metres. You are under trees. Old ones, linden and oak and beech, their canopies meeting overhead. The difference is physical, immediate, unmistakable.
Figure 22.2 — Article header with full hierarchy. Kicker in tracked uppercase accent color establishes section. Display headline in EB Garamond at --text-2xl makes the central claim. Dek in italic at --text-md elaborates. Byline with avatar placeholder, name in medium weight, affiliation and date in secondary color. The first paragraph of body text opens with a small-caps first line as a transitional device between the header apparatus and the prose. The rule and spacings create clear visual separation between each zone.
/* ── Article header hierarchy ───────────────────── */
.article-kicker {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.5rem;
}
.article-title {
font-family: var(--font-body);
font-size: var(--text-2xl);
font-weight: 400;
line-height: 1.08;
color: var(--ink);
margin-bottom: 0.75rem;
}
.article-dek {
font-family: var(--font-body);
font-size: var(--text-md);
font-style: italic;
color: var(--ink-mid);
line-height: 1.5;
margin-bottom: 1rem;
}
/* First paragraph: small-caps opening line */
.article-body > p:first-of-type::first-line {
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
}Pull quotes Three approaches and when to use each
A pull quote is a short extract from the article's text, set in a larger or more visually prominent style and placed within or alongside the body text column. Its purpose is dual: it gives the skimming reader an incentive to engage — here is something worth reading — and it provides the sustained reader with a visual rest point and a sense of emphasis. A well-chosen pull quote rewards both kinds of reading without serving neither exclusively.
The choice of which quotation to pull is a critical editorial decision. The best pull quotes are self-contained: they make sense without reading the surrounding paragraphs. They are specific rather than general, particular rather than abstract. They have energy — a rhythm, a surprise, a memorably phrased observation. They do not summarise what the body text is about to say; they surface a moment from within it that can stand alone as a statement. A pull quote that requires context to be understood has failed. A pull quote that gives away the article's most important insight too early has also failed.
The typographic treatment of a pull quote varies by context. Three approaches cover most practical editorial situations:
Cities that plant trees are not merely improving their parks. They are rewriting the thermal contract between a municipality and its residents.
Heavy top rule, light bottom rule. Body typeface at --text-lg italic. Clean, restrained — appropriate for literary journals, serious editorial. The weight asymmetry (heavy above, light below) creates a sense of the quote being set down onto the page.
The temperature drop under a mature urban canopy is not aesthetic. It is physiological. Two degrees is the difference between a walk that is pleasant and one that is dangerous for the elderly.
Dark background, light text, body typeface at --text-md italic. More dramatic and assertive — appropriate for publications with a strong visual identity, where the pull quote is as much a design element as a textual one. Use sparingly: one per spread is usually enough.
We don't plant trees for ourselves. We plant them for the people who will sit under them in thirty years.
— Mayor of Oslo, speaking at the European Urban Forestry Conference, 2022Accent-color left border, very large italic type at --text-xl, attribution in secondary typeface. Appropriate for direct quotations from identifiable sources — the visual scale matches the rhetorical force of a named speaker. The attribution anchors the quote in a specific context.
Figure 22.3 — Three pull quote approaches. Top: classical ruled — a restrained treatment suited to literary and serious editorial contexts; the asymmetric rule weight creates subtle tension. Centre: dark inset block — high-contrast treatment for publications with strong visual identity; commands more visual space and should be used at most once per spread. Bottom: large with attribution — maximum typographic scale for attributed quotations from named sources; the left border echoes the sidebar treatment for visual consistency.
/* ── Pull quote: classical ruled ───────────────── */
.pull-quote-classic {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
padding: 1.25rem 0;
break-inside: avoid;
}
.pull-quote-classic p {
font-size: var(--text-lg);
font-style: italic;
line-height: 1.35;
}
/* ── Pull quote: dark inset ─────────────────────── */
.pull-quote-inset {
background: var(--ink);
padding: 1.5rem 2rem;
break-inside: avoid;
print-color-adjust: exact;
}
.pull-quote-inset p {
font-size: var(--text-md);
font-style: italic;
color: rgba(248, 245, 240, 0.9);
}
/* ── Pull quote: large with attribution ──────────── */
.pull-quote-large {
border-left: 4px solid var(--accent);
padding-left: 1.5rem;
break-inside: avoid;
}
.pull-quote-large p {
font-size: var(--text-xl);
font-style: italic;
line-height: 1.2;
}
.pull-quote-large cite {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-style: normal;
color: var(--ink-faint);
letter-spacing: 0.06em;
}Image and text across a spread Integrating the visual and the verbal
The distinguishing feature of editorial design from other document types is the integration of images and text as equal elements of the composition. In a book, images are supplementary — they are figures that support the prose. In a report, images are evidence — charts and data visualisations that verify the argument. In editorial design, images and text are compositional partners: each occupies its portion of the spread with intent, and the visual relationship between them contributes to the reader's experience of the article as a whole.
The most common image-text arrangement in magazine editorial design is the full-bleed photograph on the opening spread, with the article header overlaid or adjacent. This arrangement achieves two things simultaneously: it gives the article an immediate visual identity and emotional register — the photograph sets the tone before a word is read — and it uses the available page real estate efficiently, making the opening spread feel generous and considered rather than crowded. The text begins on the photograph's page, or spills to the facing page, according to the compositional balance of the specific image.
In CSS Grid, image-text integration on a spread is achieved by defining the grid at the spread level rather than the page level, and placing elements across the spread as a single composition. Paged.js does not natively support spread-level CSS Grid (the spread is two separate @page surfaces), but the visual effect of a spread layout can be approximated by designing left and right pages to complement each other compositionally — ensuring that the image on the left page aligns visually with the text block on the right, that the visual weight of the two pages is balanced, and that the white space on each page contributes to the spread's overall composition rather than just its individual page.
Figure 22.4 — Four image-text integration arrangements. Top left (A): the classic feature opening — full-bleed image left, article header and body text right. Top right (B): compact half-and-half — image and header share the verso, allowing the full recto for body text. Bottom left (C): text-dominant — images appear within the text flow at varying sizes, including a full-width image spanning both columns on the recto. Bottom right (D): modular grid — images at varied sizes across a magazine-style three-column grid, creating visual rhythm through scale contrast.
On restraint
The greatest risk in editorial design is the same as the greatest risk in any design that celebrates its own expressiveness: excess. A spread with a full-bleed image, a large display headline, a dark pull-quote block, a drop cap, a kicker, a byline with portrait, and two sidebars is not more designed than a spread with half of those elements — it is less designed, because the designer has failed to make choices. Editorial design, at its best, is a sequence of considered decisions about what to include and what to leave out. The elements not used are as important as the elements used.
The most enduring editorial typographers — Willy Fleckhaus at Twen, Alexey Brodovitch at Harper's Bazaar, Neville Brody at The Face — all had in common a willingness to use white space, to restrain the apparatus, to let a single strong element carry a spread rather than filling every zone with something remarkable. Restraint is not timidity. It is confidence.
Editorial typography is the most demanding of the document types in this part, and also the most rewarding. It asks the designer to make every element carry its weight, to create visual energy within the constraints of a column and a grid, to serve the reader who is skimming and the reader who is absorbed simultaneously. Done well, it makes the act of reading a physical pleasure — not just something you do with your eyes, but something you do with your hands, turning pages in a document that was made for the page.
Chapter 23 closes Part Five with academic documents — a context where the conventions are the most rigid and the latitude the most limited, but where typographic craft still matters, and where knowing how to work within constraints produces results that are measurably better than the defaults most academic documents settle for.