How to Set Up Magazine Layout and Typography

What to take away

Build the element inventory

Editorial suggestion: start from an inventory, not a mood board. Take the last two published issues and mark every unit that repeats:

For each one, record the shortest, typical and longest length you actually printed. Editorial suggestion: design for the longest. A headline slot sized for the average will fail on the first long name.

Give each element one named style. This is not only tidiness. W3C's success criterion 1.3.1 says structure conveyed by visual formatting must also be available in code or text, so a named "caption" or "sidebar" style is what later becomes a caption or a labelled region in the digital edition. The flatplan tells you how many of each element an issue needs.

Set the page: grid, baseline and spacing

This worked page is A4 portrait, 210 by 297 mm, with 15 mm side margins. The text width is 180 mm, or 510 pt (1 mm is about 2.835 pt, because there are 72 points to an inch).

The last column below rests on a planning assumption, not a measurement. Editorial suggestion: assume an average character width, spaces included, of 0.45 em. At 9.5 pt that is 4.28 pt per character. Replace it with a count from your own typeface.

One column is far past Butterick's ceiling of 90 characters. Three columns fall under his floor of 45, which is why narrow columns tend to produce loose or heavily hyphenated lines. Two columns land in range. The U.S. Web Design System gives the same 45 to 90 range and a target of 66 characters for long reading, and notes that more space between lines can support a somewhat longer measure.

For the vertical direction, make the text block a whole number of baselines. A 12 pt baseline is 4.233 mm. Sixty-one lines are 258.2 mm, so with a 15 mm top margin the bottom margin is 23.8 mm. Nothing is rounded by eye.

Use a spacing scale built from that unit: 6, 12, 24 and 36 pt (half, one, two and three baselines). Space between an image and its caption, between a headline and its deck, and between sections all come from this list.

Two geometry rules come from outside the layout file. Keep live type away from the trim: a UK printer, Tradeprint, recommends a gap of at least 5 mm on all edges of a saddle-stitched booklet because inner pages lose more at the trim. For choosing between column, modular and hierarchical grids, read magazine grid systems compared. Trim size, binding allowance and stock set the inner margin, so settle them first using paper, print and binding options.

Specify the type

Butterick's guidance, which is a respected practitioner reference and not a standard, gives three numbers to start from.

The example body size, 9.5 pt, is below his 10 to 12 pt band. He notes that nearly every book, newspaper and magazine is set smaller than 12 pt, and that apparent size depends on the face. So treat 9.5 pt as a test: does your chosen face look as large as a 10 pt setting of another?

Editorial suggestion for a starting specification on the A4 page above, all values on the 12 pt baseline:

Method for confirming the measure with real copy:

If you justify the text, Butterick says hyphenation must be switched on to avoid large gaps between words, and he notes that major U.S. newspapers and magazines use a mix of justified and left-aligned setting. For readers with low vision or dyslexia, the UK Home Office accessibility manual recommends left-aligned content and advises against italics or all capitals for blocks of text.

Fix the usual faults

Everything competes for attention

Count the items on a spread that a reader would call the first thing they saw. Editorial suggestion: if the answer is more than one, demote the others. Keep one dominant element, then rank headline, deck, body, caption and sidebar by editorial function, and group them with the spacing scale before adding rules or boxes.

Body copy feels dense

Test measure, size, leading and column count together, but change them one at a time. The arithmetic shows why. A single 119-character line cannot be rescued by extra leading. Moving to two columns takes it to 58 characters and fixes the problem at its source. If leading is the culprit, check it against the 120 to 145 percent band. Print proofs at actual size, because a zoomed screen hides density.

Text sits over a photograph

For digital pages, WCAG 2.2 criterion 1.4.3 sets 4.5 to 1 for ordinary text and 3 to 1 for large text, defined as 18 pt, or 14 pt bold. Its failure technique F83 names background images without enough contrast behind text. The same test is a sensible check for print.

Using the WCAG relative-luminance formula, white text on a mid-grey of #767676 gives 4.54 to 1 and passes. On #949494 it gives 3.03 to 1, which passes only for large type. Find the lightest area under the words, not the average tone.

Fix in this order: move the text to a quieter part of the image; use a solid panel behind it; separate the text from the picture. A crop that removes context changes what the photo says, so that decision belongs to the picture editor (see the photo editing guide).

Caption and image drift apart

Editorial suggestion: keep the caption within one baseline unit (12 pt, 4.2 mm) of the image edge, set it to the image width, and put the credit inside the same block. Do not let a column break fall between them. In the digital edition, criterion 1.3.1 applies again: the caption must be tied to the image in markup, not only by position.

Digital text clips when readers change spacing

Criterion 1.4.12 (Text Spacing, Level AA) requires no loss of content when a reader sets line height to at least 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. The criterion does not require you to use those values. It requires that your layout survive them.

At 9.5 pt that means 14.25 pt lines (19 percent more than the 12 pt baseline), 19 pt after each paragraph and about 1.1 pt added to every character. On the assumption above, letter spacing alone takes the 58-character column to about 46 characters, and adding the word spacing takes it to about 44, so the same copy needs roughly a fifth to a quarter more lines. A fixed-height box then clips, which W3C lists as failure F104. Let boxes grow, avoid absolute units, and test at 200 percent text size and at 320 CSS pixels wide. Production notes for the whole digital issue are in the digital accessibility guide.

Test before sign-off

Sources