Typographic Notes — No. 07
Columns · Padding · Gutters
Set in Columns
A text block is not one decision but three: how many columns the copy runs in, how wide the channel between them sits, and how much space holds the type away from its own edge.
Figures
Four specimens, one passage
Set in
Instrument Serif & Work Sans
Rhythm
1200px measure, 8-point scale
Settings
Columns 2
Gutter 48px
Padding 0
Measure 452px
THE TEXT BLOCK IS A SET OF DECISIONS. None of them are finishes applied at the end. Each one changes how far the eye travels before it turns back, and how long a reader is willing to stay on the page.
Columns exist because a wide page is hostile to a single measure. Run one column across twelve hundred pixels and the line grows past a hundred characters — long enough that the eye loses its place on the return. Split the same block in two and the measure falls back into the range that reads without effort. Split it in four and it falls out the other side.
The figures that follow set one passage under different values. The settings are printed beside each specimen, so the difference is something to read rather than something to imagine.
Figure 01
Anatomy of a column
The dashed rule marks the padding boundary. The tinted channel is the gutter. Click a marker to read what each part is doing.
A column is a decision about the eye. Set a line too long and the reader loses the return; set it too short and the rhythm breaks every few words. The measure — the width of one column — is the instrument that tunes this, and on a wide page columns are how the measure gets set at all. Between forty-five and seventy-five characters to the line is the range that reads without effort. Everything else in the block exists to protect that range: the gutter keeps two columns from bleeding into one another, and the padding keeps the type from touching the edge it sits inside.
Part one
Padding
The space between the block’s own edge and the type inside it. It belongs to the block, not the page — so a percentage gutter narrows as the padding grows.
Figure 02
Column count
One passage, one block width, one gutter. Only the number of columns changes — and with it, the measure.
A column is a decision about the eye. Set a line too long and the reader loses the return; set it too short and the rhythm breaks every few words. The measure — the width of one column — is the instrument that tunes this, and on a wide page columns are how the measure gets set at all. Between forty-five and seventy-five characters to the line is the range that reads without effort. Everything else in the block exists to protect that range: the gutter keeps two columns from bleeding into one another, and the padding keeps the type from touching the edge it sits inside.
Two columns · 40px gutter · 460px measure · about 71 characters
Note
Two columns land inside the comfortable range. Three sit at its edge. Four fall below it, and the copy begins to fragment — more columns is not more readable.
Figure 03
The gutter
The same two columns at a tight gutter and an airy one. Click the specimen to flip between them.
Gutter 16px · columns 472px · the channel nearly closes
Gutter 80px · columns 440px · the channel reads as air
A column is a decision about the eye. Set a line too long and the reader loses the return; set it too short and the rhythm breaks every few words. The measure — the width of one column — is the instrument that tunes this, and on a wide page columns are how the measure gets set at all. Between forty-five and seventy-five characters to the line is the range that reads without effort. Everything else in the block exists to protect that range: the gutter keeps two columns from bleeding into one another, and the padding keeps the type from touching the edge it sits inside.
A column is a decision about the eye. Set a line too long and the reader loses the return; set it too short and the rhythm breaks every few words. The measure — the width of one column — is the instrument that tunes this, and on a wide page columns are how the measure gets set at all. Between forty-five and seventy-five characters to the line is the range that reads without effort. Everything else in the block exists to protect that range: the gutter keeps two columns from bleeding into one another, and the padding keeps the type from touching the edge it sits inside.
Flip the gutter
Note
A tight gutter saves width and costs clarity: at sixteen pixels the eye can skip the gap and read straight across. Eighty separates the columns cleanly, at the price of measure.
Figure 04
Padding and the inner box
Three blocks of identical width, each with a 10% gutter. The tinted area is the inner box the gutter is measured against — padding shrinks it, so the gutter shrinks too.
A percentage gutter measures against the block’s own inner width. Add padding and that inner width shrinks — so the gutter shrinks with it. Same value, different result.
Padding 0 · inner 379px · gutter 38px
A percentage gutter measures against the block’s own inner width. Add padding and that inner width shrinks — so the gutter shrinks with it. Same value, different result.
Padding 24 · inner 331px · gutter 33px
A percentage gutter measures against the block’s own inner width. Add padding and that inner width shrinks — so the gutter shrinks with it. Same value, different result.
Padding 48 · inner 283px · gutter 28px
In closing
A column is not a container. It is a measurement of attention.
Count, gutter and padding are the three values that hold it. Set them once, and every block on the page reads the same way.