Why does a magazine column run narrower than a web column?

Because the page is a fixed width and the column count is a design decision rather than a length. A three-column A4 page with a 5mm gutter leaves about 56mm of text per column, which is around 30 to 40 characters at 9.5pt. That is far below the 45 to 75 band used for screen reading, which is why newspaper and magazine setting depends on hyphenation to avoid rivers.

What makes a baseline unit correct?

It is the leading value, and what makes it correct is that the text block height divides by it into a whole number of lines. A leading of 12.5pt against a block of 240mm gives a clean line count; a leading of 12.6pt leaves a sliver at the foot of every page. The ratio to the type size, usually between 1.2 and 1.5, is the second thing the readout reports.

Why is the headline three baseline units?

Because a heading has to occupy whole units of the vertical grid if the page is to keep its rhythm. Three units gives a headline a line box that lines up with the body text below it, and the generated CSS applies exactly that as the line height, with the size set at 3.2 times the body size.

Can the gutter be zero?

Yes, and the column width calculation handles it, but a gutterless multi-column layout leaves no visual separation and reads as one wide block apart from the column breaks. Most magazine setting uses between 3mm and 6mm, which is enough separation to be seen at reading distance without breaking the page into unrelated strips.

Does the column width account for the trim size?

No. The calculation works from a fixed 180mm text width, which is an A4 page with 15mm margins a side. If you are setting a different trim size, work out your text width first and use the measure fields in the specification sheet to check the resulting column width before committing to a column count.

Magazine Column Setter

Grid

Body faceHeadline face

Columns

Guttermm

Body sizept

Leadingpt

Jump head

Body copy

Column width56.7mm ≈ 34 chars

Chars/line check30–60 band

Baseline unit12.5pt (1.316× type size)

Headline block3 baseline units

Spread preview

THE COLUMN IS THE UNIT

Magazine setting works to a grid: the number of columns is fixed by the page size, the gutter is part of that grid, and the body baseline sits on a multiple of the grid unit. Every element — a headline, a caption, a picture — occupies whole columns and whole baseline units, which is what makes a spread feel deliberate even when it is busy.

A second paragraph fills the grid so the column bottoms can be compared — a magazine spread balances columns to within a line or two, and the jump head closes the story.

Continued on page 42

css output

.magazine {
  font-family: 'Lora', serif;
  font-size: 9.5pt;
  line-height: 12.5pt;          /* 1.316× the type size */
  columns: 3;
  column-gap: 5mm;
  hyphens: auto;
  text-align: justify;
}

.magazine h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30.4pt;
  line-height: 37.5pt;   /* 3 baseline units */
  margin: 0 0 18.75pt;
  letter-spacing: 0.01em;
}

.magazine .jump-head {
  font-size: 8.55pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

You Might Also Need

Text Column Layout Builder

Build multi-column text

Newspaper Typography Previewer

Preview newspaper type

Baseline Grid Calculator

Lock text to a baseline grid

Print Type Specification Sheet

Spec sheet for print

The magazine column setter lays out a magazine page on a baseline grid, where the column count and gutter define the horizontal grid and the leading defines the vertical one. The readout checks the two things that break first in production: a column narrow enough to hyphenate badly, and a baseline unit that does not divide the text block.

What is Magazine Column Setter?

The magazine column setter takes a column count, a gutter, a body size, a leading value and two faces, then reports the resulting column geometry, the baseline unit and the CSS that produces the spread.

Columns run from one to five and the column gutter from 0 to 12mm in half-millimetre steps, with defaults of three columns and a 5mm gutter.
Body size runs from 6pt to 14pt in quarter-point steps, defaulting to 9.5pt, and leading from 8pt to 20pt, defaulting to 12.5pt.
The body and headline faces come from the built-in catalogue, and a jump head can be set to one of two standard phrasings or turned off.
The grid is drawn on a 180mm text width, which is an A4 page less 15mm margins a side, so the column width is that width minus the gutters divided by the column count.
A headline block is reported in baseline units, and the generated headline style is exactly three of them, which is what keeps a heading from breaking the vertical rhythm.

The characters per line figure is the check that matters most, because a magazine column is narrow by design. It is estimated from the column width in points divided by the body size multiplied by 0.5, and the readout names the band it falls in: below 30 characters the column is very narrow and hyphenation becomes essential, between 30 and 60 it is typical for a magazine, and above 60 it is wide for a column of that kind. The baseline unit is reported as the leading in points and as its ratio to the type size, which is usually between 1.2 and 1.5 on a magazine page. The generated CSS sets the type in points, applies the column count and the gutter in millimetres, justifies the copy with automatic hyphenation, and sizes the headline at 3.2 times the body with a leading of three baseline units.

The page geometry is fixed at a 180mm text width, so a different trim size or margin scheme has to be worked out with those numbers and entered as the measure elsewhere.
The character estimate uses an average character width, so a condensed or extended face drifts from it.
Photos, captions and the wells they occupy are not modelled, even though they consume columns on a real spread.
The baseline grid is described rather than overlaid, so misalignment between an element and the grid is not visible in the preview.
Justification and hyphenation are assumed rather than optional, which is right for a magazine column and wrong for a narrow one.

Use it when a spread is being set and the column count is still being decided, since the characters per line figure settles that argument quickly, and again when the baseline unit is being fixed, because a leading that does not divide the text block height shows up later as a page that cannot hold a whole number of lines. Where the columns are for a screen rather than a page, the text column layout builder covers the same arithmetic with CSS properties, the book interior layout preview covers a single text block instead of a multi-column grid, and the running head previewer covers what each page carries at the top.

How to use Magazine Column Setter

Pick the body and headline faces, then set the column count and gutter for the page you are working on.
Set the body size and leading, and watch the baseline unit readout since that ratio is what the vertical grid depends on.
Check the characters per line band in the results box and adjust the column count until it sits between 30 and 60.
Choose a jump head or turn it off, then copy the generated CSS, which carries the column geometry, the justified body and the three-unit headline.

When to use Magazine Column Setter vs related tools

Reach for it when a magazine spread is being laid out and the column count is not yet settled, or when a designer wants to see whether a 9.5pt body on 12.5pt leading will hold up across three columns. The baseline unit figure is also worth checking before a headline style is written, since a heading that is not a whole number of units will always look slightly off. For screen columns, the text column layout builder applies the same arithmetic in CSS, the newspaper typography previewer covers the tighter leadings a newspaper uses, and the print type specification sheet records the resulting sizes in points for production.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.