Typographic Notes — No. 08
Many Columns · Motion · Links
Five, Six, Motion
A second sheet of specimens: what happens past two columns, how split-letter and word animations behave once copy is fragmented across a channel, and whether a link survives inside a column.
Figure 05
Past the comfortable range
The same 1200px block at five and six columns. Below about thirty characters a line, justification starts to open rivers of white space and the copy reads as a list of fragments.
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. Past four columns the range is gone and the block becomes texture.
Five columns · 40px gutter · 208px measure · about 32 characters · justified
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. Past four columns the range is gone and the block becomes texture.
Six columns · 28px gutter · 177px measure · about 27 characters · ranged left
Observed
At six columns, ranging the text left is the only humane option — justification at a 27-character measure forces gaps wide enough to read as vertical channels down the block. Narrow columns want a ragged right edge.
Figure 06
Motion inside a column
Four specimens, each two columns, each carrying a different letter- or word-split animation. They play on scroll-in — click any specimen to run it again.
Type in · by character
Click to replay
Typed character by character, the copy fills the first column to its foot before a single word appears in the second. The fragmentation is invisible while it runs: the reader watches one continuous line of type find its own way around the gutter.
Split · by word
Click to replay
Split by word, the stagger runs in reading order — down the first column, then down the second. Because each word is animated in place, nothing reflows while the sequence plays and the column edges stay exactly where they were set.
Rain · by character
Click to replay
Rain drops each character into place on its own spring. At this measure the effect is dense — a narrow column packs more characters per square inch, so the same stagger reads faster and busier than it would across one wide block.
Highlight · by word
Click to replay
Highlight sweeps a tint through the copy word by word. It is the one preset that reads as a guide rather than an entrance: the eye follows the tint down the first column and picks it up again at the head of the second.
Observed
Split animations sequence in reading order across the whole block, not per column — the second column waits its turn. Because every fragment animates in place, the column boundaries hold: nothing rewraps mid-sequence. Give the block a fixed height, though. On a content-sized box the balance can shift as fragments arrive.
Figure 07
A link inside a column
Three columns carrying live links mid-flow: one out to the web, one back to the first sheet. The third column holds a link deliberately placed near a column break.
A link is just another run of type inside the flow, so it fragments with everything else. Set three columns and an anchor placed late in the copy will sit wherever the balance puts it — there is no way to pin it to a column, and no need to.
What matters is that the target still resolves. This one opens ceros.com in a new tab, and this one walks back to the first sheet of specimens without leaving the experience.
Underlines are worth keeping here. In a narrow measure a link marked by colour alone is easy to miss, and the accent is doing other work on this page — the rule beneath the type is what identifies it as something to click.
The last case is the awkward one: a link that lands on a column break. This anchor names a typeface and runs long enough to split across the gutter, which is legal and clickable in both halves, but it reads as two links rather than one. Keep anchors short in narrow columns.
Three columns · 40px gutter · 293px measure · three live links
Observed
Links behave normally inside columns — external and internal targets both resolve, and hit areas follow the fragments. A long anchor can break across the gutter, so keep link text short at narrow measures.