Typographic Notes — No. 09
Wrap · Clip · Lists · States
Wrap, Clip, Lists
Sheet three: the settings that sit alongside a column count and change what it does — line-breaking mode, clipping, list markers, interactive counts, and type that changes size inside a narrow measure.
Figure 08
Line-breaking mode
The same passage in two columns under all four wrapping modes. Only the breaking rule changes — count, gutter and measure are identical throughout.
Wrap — the default
Works
Ordinary wrapping breaks each line at the last opportunity that fits the measure, then hands what is left to the next line — and at the foot of the column, to the next column. This is the only mode a columned block genuinely wants.
Both columns fill and balance as expected
No wrap
Breaks columns
With wrapping switched off each paragraph stays on one line, so there is nothing to fragment and the column count has no effect at all. The line simply runs out of the box.
One line per paragraph · second column never fills · clipped here to contain it
Pretty
Modern browsers
Pretty spends a little more effort on the breaks to avoid stranding a single short word on the final line. Orphans are far more visible at a narrow measure, so this is the mode a columned block benefits from most.
Applies per column · falls back to ordinary wrapping where unsupported
Balance
Short blocks only
Balance evens out line lengths across a block, but browsers stop applying it past a handful of lines — so on a body of copy this long it does nothing, and this specimen should read identically to the first.
Intended for headings · compare against the first specimen
Observed
Wrapping mode and column count are not independent: no-wrap removes the line breaks that fragmentation depends on, so the count silently stops mattering. Never pair the two. Pretty is the useful upgrade at a narrow measure; balance is aimed at headings and quietly declines to act on a long block.
Figure 09
Overflow runs sideways
Two identical over-set blocks: more copy than a fixed height and two columns can hold. In a single-column block the surplus would run off the bottom — here it leaves sideways, as a third and fourth column outside the box.
Clip content — on
Surplus is cut at the frame
A fixed height and a column count together set a capacity. Fill the two columns and the block is full; anything after that has nowhere to go inside the frame. With clipping switched on, the surplus is simply cut at the border and the reader never learns it existed. That is the right choice for a specimen or a card of even height, and the wrong one for copy that has to be read, because there is no scrollbar and no indication that anything is missing. This paragraph is deliberately longer than the box can hold, and the sentence you are reading is already past the point where the block ran out of room.
Two columns · 164px height · overset copy · nothing escapes the frame
Clip content — off
Surplus escapes to the right
A fixed height and a column count together set a capacity. Fill the two columns and the block is full; anything after that has nowhere to go inside the frame. With clipping off, the surplus keeps making columns — a third, then a fourth — marching out past the right border at the same width and gutter as the two inside it. The frame stops describing the text. That is the behaviour to watch for, because it does not announce itself: nothing turns red, nothing scrolls, the copy simply continues into whatever happens to sit beside the block. On a sheet like this one there is empty margin to absorb it. In a real layout there is usually a caption, an image or a second column of content in that space, and the overset columns land on top of it. This paragraph is deliberately far longer than the box can hold, and the sentence you are reading now is already outside the frame, in the third column, past the border on the right.
Same settings · extra columns render beyond the border, contained here by the group
Observed
This is the behaviour most likely to surprise: columns change the direction overflow travels. A columned block that overflows does not push down, it pushes right — over whatever sits beside it, and off the sheet if there is nothing there. Either clip it deliberately or give the block a content-sized height, but do not leave an over-set columned block unclipped next to other content.
Figure 10
Lists across a gutter
Three list styles fragmented across columns. The question is whether markers survive the break and whether an ordered list keeps counting from one column to the next.
Ordered · three columns
Does the count continue?
Set the measure before anything else
Choose a count that keeps it in range
Open the gutter until the columns separate
Add padding last, and check the gutter again
Range narrow columns left, never justified
Give the block a definite height
Decide what happens to the surplus
Read it back at the size it will ship
Count the characters on a line
Leave it alone once it reads
Ten items · note the extra left padding, so markers are not clipped at the column edge
Bulleted · two columns
Measure — the width of one column
Gutter — the channel between two
Padding — the inset from the frame
Count — how many the block runs
Rag — the shape of the right edge
Capacity — height multiplied by count
Six items · markers hold on both sides of the gutter
Checkmark · two columns
Wrapping left at its default
A gutter written with the count
A definite height on the block
Left padding for the markers
Ragged right below thirty characters
Clipping decided, not inherited
Six items · ticks sit in the same left inset as bullets
Observed
Lists fragment cleanly and the numbering continues across the gutter rather than restarting. The one thing to watch is the left inset: markers hang outside the text body, so a columned list needs extra left padding or the bullets in the second and third columns sit tight against the channel.
Figure 11
Switching columns off
A count of one is not the same as no count at all. Where a count is inherited — from a base breakpoint or another state — leaving it unset inherits the columns; writing one is what turns them off. Click the control to move between three columns and one.
Three columns at this block width put the measure at about forty-five characters — the lower edge of the comfortable range, and about as narrow as justified copy can go before it opens gaps. Read this specimen, then switch to a single column and read the same passage again: the words are identical, but the pace of the return changes completely, and with it how long the paragraph feels.
Count 3 · 40px gutter · the gutter is written alongside the count
Observed
A single-column block at 1200px runs past a hundred characters a line — too wide to read comfortably, which is the argument for columns in the first place. Note also that the gutter is inert at a count of one: it stays on the block, waiting for the count to rise again. Nothing needs clearing when you switch columns off.
Figure 12
Fill, lead-in, alignment
Three remaining behaviours: a background on the columned block itself, a large lead-in run inside a narrow measure, and what vertical alignment does to a block with room to spare.
Background on the block
Tint runs under the gutter
A background belongs to the block, not to the individual columns — so the tint runs straight under the gutter as one field rather than painting two panels with a gap between them. If you want the columns to read as separate cards, the tint has to sit on separate elements; a columned block can only ever have one ground.
One ground, two columns · 20px padding holds the type off the tint edge
Mixed sizes in a column
Lead-in run
A lead-in run set well above the body size will push the first line of the column taller than the ones beneath it, because line height is resolved per line from the largest thing on it. In a narrow measure that mismatch is conspicuous: two or three words of display type can occupy a third of the column’s depth. Keep the step modest, or give the lead-in its own line.
24px lead-in over 13px body · first line grows, the rest hold their rhythm
Vertical alignment with room to spare
Middle · 240px height, short copy
Give a columned block more height than its copy needs and the surplus has to go somewhere. Columns balance against the available depth, so short copy in a tall block spreads thin across every column rather than filling the first and leaving the rest empty.
Four columns · copy well short of capacity · watch how the balance distributes it
Observed
A columned block has one ground and one padding box, so a background cannot be made to stop at a gutter. Mixed inline sizes are safe but expensive in a narrow measure — the tallest run on a line sets that line’s height, and at 160px wide a display word costs real depth. Short copy in a tall block is the case to watch: the balance spreads a few lines across every column instead of filling the first, which reads as a mistake even though it is working correctly.