Topic

Magazine Design

Principles for magazines that work in print and on screen: what to settle before the first layout, then covers, grids, type, images, interactive media and accessibility.

Good magazine design helps readers find their way, read comfortably and want to turn the page. It is a system of decisions you make once and apply to every issue, plus the judgement to break that system on purpose.

Decisions to settle before the first layout

Format and channels. Print, digital or both, and which one leads. Agree page size, binding and paper with your printer early; for digital, check your readers' devices.
Grid. Columns, margins, gutters and a baseline grid for body text.
Type system. A small set of typefaces, often one for text and one for display, with fixed styles for every kind of text.
Colour and images. A limited palette and a written brief for photography and illustration.
Flatplan. A page-by-page plan of the issue, to judge its pace before anyone starts a layout.

Write them down as a short style sheet; how to design a magazine takes them step by step.

Covers

Diagram of a magazine cover with four labelled parts: 1 the masthead, readable when small; 2 one dominant main image; 3 the cover lines, clearly ranked with the main line first; 4 the ISSN in the top right corner, if the magazine has one. — One dominant image, a masthead that stays legible when small, ranked cover lines and, if you have one, the ISSN top right.

The cover has one job: make the right reader pick up or open this issue. Give it one dominant image, a masthead that stays legible at thumbnail size and a clear ranking of cover lines. If you have an ISSN, print it on every issue, preferably top right on the cover; an online edition shows its own ISSN on its title screen, homepage or first PDF page ^[1]. More in magazine cover design.

Grids, hierarchy, pacing and white space

Grid. It makes pages feel related and speeds up production. Break it on purpose, for an opening spread or a key image.
Hierarchy. Decide where the eye lands first on every spread, and give that element priority through size, weight, position or colour.
Pacing. Alternate dense and open pages, and give long features a strong opener. White space is part of that rhythm, not leftover room.

Diagram of a magazine spread and its grid: 1 outer margin and inner margins at the spine, 2 trim and bleed, where a picture runs past the page edge, 3 a column and the gutter between columns, 4 the baseline grid that the lines of body text sit on. — Margins, columns, gutters and a baseline grid: one grid that every page of an issue shares.

Typography

Set body text for comfortable reading first, then design the headlines around it.
Keep lines short. At WCAG's highest level (AAA), readers must be able to get lines of no more than 80 characters, unjustified text and line spacing of at least 1.5 within paragraphs ^[2].
Check narrow justified columns for rivers and stretched word spacing.
Test captions and credits on paper and on a phone.

Imagery

Choose images that carry information or emotion, crop with intent, and write captions that add what the picture cannot say. Credit every image: all Creative Commons licences require attribution, and the recommended credit names title, author, source and licence ^[3]. In digital editions, informative images need a text alternative and decorative ones an empty alternative ^[4].

Print versus digital

Diagram: a print spread with a face and a headline across the gutter becomes two screens on an upright phone, which split both. Below, a spread with the headline on one page and the picture on the other shows each page complete on its own screen. — An upright phone shows one page at a time, so nothing important may cross the gutter.

Print. Agree the printing condition, bleed and proofs with your printer first. ISO's technical committee for graphic technology recommends PDF/X artwork and preflight checks ^[5].
Digital. Make each page work on its own, and decide early whether readers also get a scroll view or a text version. Digital magazines compares the formats.
Interactive. Video and galleries show motion and sound, but compete with the text: moving content can be a severe distraction for some people ^[6], and animation can cause dizziness, nausea and headaches in people with vestibular (inner ear) disorders ^[7]. Give each element a fixed place beside the text it explains, outside the column, with a still image for print (interactive magazines).

Accessibility

Diagram of the WCAG Level AA contrast minimum: normal text at least 4.5:1; large text, 18 point or 14 point bold, at least 3:1; text over a photo, measured against the area behind it and set on a solid panel where the photo is too light. — WCAG 2.2 Level AA: at least 4.5:1 for normal text and 3:1 for large text.

At WCAG Level AA, text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text (at least 18 point, or 14 point bold) ^[8].
Never use colour alone to convey information: label colour-coded sections and chart lines as well ^[9].
In PDFs, tags define the headings and the reading order; pages with sidebars, footnotes, tables or graphics may convert in the wrong order, so check the tags ^[10] ^[11].

Details are in how to make your magazine accessible; run through the accessibility checklist before every release.

Common mistakes

One main cover line, clearly ranked
One type system for every feature
Text over calm areas of a photo
Media in a fixed frame, with a still image

Avoid

Many cover lines of equal weight
A new typeface for every feature
Text over busy photos, without enough contrast
Moving video or animation beside body text

Learn from well-made magazines

Restraint can be a decision. Eye's founding editor Rick Poynor recalls that its first design was deliberately restrained, with no cover lines on the covers ^[12].
Change can be a rule. Frame's design director writes that in recent years each printed issue has added one typeface shaped by its theme ^[13].
A masthead can last. According to BRUTUS, the logo drawn by Seiichi Horiuchi, its art director from the first issue, has not changed at all since 1980 ^[14].

Look past single pages to the system: how often the grid breaks, how many typefaces appear, how a year of covers hangs together.

What this section covers

The guides are listed below. To plan an issue, use the magazine publishing checklist; for standards and references, see resources.

In this section

Sources

Slanted Magazine #48—Seoul