Body Text Split Into Newspaper Columns

Text that runs down, then back up

Some designs pour a long passage into two or three columns, side by side, like a page of a newspaper. It looks composed and a little old-fashioned, which is often the intent.

On a laptop, the first column runs below the bottom of the window. The reader scrolls down to finish it, then scrolls back up to find where the second begins.

On a phone the columns either shrink into slivers a few words wide or stack in an order nobody checked.

The look survives. The reading does not.

Why it works on paper

A newspaper page is seen whole. The eye finishes one column and jumps to the top of the next without anything moving.

Columns exist in print to keep lines short on a wide sheet. A line running across a whole broadsheet page would be impossible to follow.

On paper, the page decides how tall a column is. On a website, the length of the text decides, so a long passage makes columns taller than any window.

A screen shows a window onto a page, not the page. The jump that costs nothing on paper becomes a scroll, and every scroll means finding your place again.

What columns do on a screen

• Scroll down to finish the first column.
• Scroll back up to find the top of the next.
• Lose the place whenever the window is a different height.
• Read slivers on a phone, three or four words to a line.
• Meet uneven gaps where justified text is stretched to fit.

The second is the one that loses readers. Hunting for the start of the next column is the moment many stop reading and start skimming, or leave.

Phones make it worse

How columns behave on a phone depends on how they were built.

If the browser is flowing the text into columns, a design that never switches this off for small screens keeps all three, each a thumb's width wide.

A responsive design normally has a rule that drops to a single column below a certain screen width. Many themes from a few years ago never had one.

If the text was split by hand into separate boxes, the boxes stack on a phone, and each break falls wherever the designer happened to cut, often mid-sentence.

Hand-split text has a second problem. Every edit unbalances the columns, so someone has to shift sentences between boxes whenever the wording changes.

Justified text in narrow columns

Columns usually come with justified text, flush on both edges, because that is how newspapers look.

Newspapers hyphenate carefully to make that work. Browsers do not hyphenate unless told to, and some cannot, so they stretch the spaces between words instead, and narrow columns fill with uneven gaps.

Text aligned to the left, with a ragged right edge, reads more evenly on screen at any width.

A worked example

A family maple syrup maker on Vancouver Island taps bigleaf maples in winter, and sells its syrup from a farm shop, at markets and online.

Its site was redesigned last year in a heritage style, with the family's story set in three justified columns under a large initial letter, like an old almanac.

The story ran to about a thousand words: how the trees are tapped, how sap becomes syrup, why the syrup darkens as the season goes on.

On a laptop each column was taller than the window, so readers scrolled to the foot of the first and hunted for the top of the second.

On a phone the theme kept all three columns, each a few words wide.

The fix kept the heritage type and dropped the columns. The story now runs in one column of comfortable width, broken by headings and three photographs of the season's work.

Columns survived in one place: the shop page, where each syrup has its own short box with sizes and prices. Each box makes sense alone, and on a phone they stack neatly.

One column of comfortable width

Body text belongs in a single column, narrow enough that each line is easy to follow and wide enough not to break every few words.

On a large screen that leaves space on either side, which is fine. Photographs, a sidebar or simply white space can occupy it.

A single column also behaves on a phone without special treatment, and anyone can edit it without unbalancing anything.

Where columns belong

Columns suit short, separate items that each make sense alone: three services, a row of products, opening hours beside a map, staff profiles. The footer, with address, hours and links in short blocks, is the classic case.

The reader takes in each item whole and moves to the next by choice, not by scrolling back up through a sentence.

On a phone such columns stack into a list, which is exactly what they are.

Breaking up a long page instead

The wish behind newspaper columns is usually a fair one: a long page of plain text looks heavy.

Headings every few paragraphs, short paragraphs, a photograph between sections and the occasional list all lighten a page without asking anyone to scroll backwards.

Make each heading say what the next few paragraphs are about, so a reader who skims can find their place and start again.

A short quotation pulled out in larger type does the same for a story page, provided the words also appear in the text.

The counter-case

Two short paragraphs side by side, each shorter than the window, do little harm on a large screen, provided they stack on a phone.

A document meant for printing, such as a newsletter offered as a PDF, can reasonably use columns, since it will be read on paper.

For anything read on screen and longer than the window, keep it in one column and save columns for short, separate items.

The check

1. Open your longest pages on a laptop.
2. Look for text running in columns.
3. Shrink the window and watch the columns.
4. Open the same pages on a phone.
5. Find the template or style creating the columns.
6. Change it once for every page.
7. Keep columns for short, separate items.

Step five saves the most work. Columns usually come from one template or one style rule, so a single change by whoever maintains the site fixes every page that uses it.

Choosing the width of that single column is covered in lines of text that run the width of the screen.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.