Magazine design, layout, and typography: a practical guide

What to take away

What the reader is doing

A reader opens an issue to find out what matters and how long it will take. Design answers both before a word is read: a department label, a headline, a deck and a standfirst rank themselves in the first second. Get that ranking wrong and the reader works harder than the editor intended.

That ranking is the whole job. Everything below is machinery for holding it steady across 96 pages and three screen widths.

Image and credit

The cover layers photography and lettering; it is an example of that device, not a template to copy.

Name the parts before you style them

Write the flatplan first, then the element list.

A department label tells the reader where they are. A headline tells them what the piece is. If both sit at the same size and weight, neither does its job. Give each a named role in the style sheet so the difference survives a handover to a freelancer.

Build the grid and the spacing scale

Decide page size, margins, column count, gutters and baseline before any page is laid out. In print, add binding allowance, trim, bleed and a safe area for crossovers. On screen, set containers and breakpoints by how the content behaves, not by a list of device widths.

Pick one spacing unit and multiply it. A modular grid with a 12pt baseline lets a caption, a table and a folio all land on the same rhythm without anyone measuring by eye.

Worked example: setting a body size

Take a feature page 210mm wide with 18mm margins and two columns with a 6mm gutter. Each column measures 81mm. At a 9.5pt typeface with a 12.5pt leading, that column runs roughly 62 characters, inside the 45 to 90 range the U.S. Web Design System's typography guidance describes, with about 66 characters as a useful target for long text.

Change the typeface and the number moves. A face with a large x-height and wide characters fits fewer; a narrow one fits more. Set the copy, count the characters, then adjust the column, the size or the leading. Never adjust all three at once.

Type roles and the scale

These are working ranges from common practice, not published standards. Test your own typeface: x-height, width and weight all change apparent size.

Images, captions and credits

Fix image proportions before commissioning photography, so the picture desk shoots to the crop. Record the crop limits, where the subject must sit, the caption length and the credit format.

A dramatic crop that removes context changes what the picture says. That is an editorial decision, not a design one, and it belongs to the picture editor. Keep essential words as live text rather than baked into an image, so they stay searchable and can be resized.

Prototype and proof

Build four representative spreads: a text-heavy feature, a picture-led opener, a data page and a contents page. Use final-length copy, long names, real tables and real captions.

W3C's explanation of resizing text sets the digital test: text scales to 200 percent without assistive technology and without losing content or function, and the criterion covers labels and controls as well as running copy. Captions and images of text fall outside it.

Before sign-off, check:

Common questions

How many typefaces should a magazine use?

As few as the system needs. One versatile family can cover every role through size, weight and spacing. A considered pair works when the second face has a clear job, such as display or data.

Must every page follow the grid?

Every page should understand the grid. A deliberate exception reads as deliberate only because the surrounding pages are stable. Document the exception so the next designer knows it was a choice.

Should print columns be copied to mobile?

No. Keep the hierarchy and the relationships between elements, then let the digital layout reflow for the viewport. A three-column feature becomes one column with the same headline, deck and caption order.

When should a design be tested with real copy?

From the first useful prototype. Placeholder text hides length, hierarchy and fitting problems until the issue is at the printer, when fixing them costs the most.