Flexible Page Layout on a 23-Column Grid

When doing page layout, you often want a standardized design, or template, that can accommodate a wide range of content. One thing that can vary a lot is the organization of the body copy into columns: you may often need one, two, or three, for different types of article, as well as hero-quotes, headlines, and other devices. Accommodating more variety is harder. But a 23-column grid can do a lot.

Let me clarify first that the 23 vertical columns are a division of the text block you’ve defined on your page–the whole page layout is a bigger story. (You could start with the text block and pad out to 25 columns, or 27 columns, to define your page but I wouldn’t guarantee a very harmonious design.)

Convenient Divisions

You can readily divide 23 into groups to make text columns, with some of the original columns acting as gutters (always 1 per gutter). Because I’ve chosen the number 23 very carefully, the math works out for divisions of 2 and 3, as well as several sub-divisions. So we can make text columns of 2, 4, 8, and also 3, 6, and 12. Here’s I’ve marked the gutters:

You’re unlikely to lay copy into the smallest divisions ( 8 and 12), but they could be useful as guides for more complex arrangements, like all the items on a title page of menu system. The larger divisions, though, can easily accommodate copy.

Laying in Copy

The beauty of sticking to one vertical grid system is a consistency that persists, even when the exact text arrangement varies. Here are examples of text in 1, 2, 3, and 4 columns (the font size remains the same, but naturally I vary the leading or line-height):

We start to reach the boundaries of usability with 4 columns, because the gutter does not scale with column width. But narrower text isn’t very readable anyway.

If we are treating more varied content, with images and captions, though, we can find use for the 6-columns layout, at least:

With the images, I have broken the grid somewhat, and extended them to the halfway mark of a column–and there is no harm in that.

Why Does it Work?

23 works out well here, and you might be curious about the mathematics of it–and what other options exist.

If we just want to ensure that we can split our text block into 2 or 3 columns, with 1-column gutters in between, what options work? The major constraint, is that for any number of text columns, we need one less gutter (e.g., 3 gutters for 4 columns). This is why a vertical grid of any even number, like 10, doesn’t work: there’s no central slot to use for a 2-column gutter.

Putting it algebraically, if X is the number of grid units, we need to find X so that X — 1 is divisible by 2; and that X — 2 is divisible by 3. I leave it to you to rearrange and try solving, if you’re so inclined. As it turns out, you can also find other options by knowing one: you just double it and add 1, or subtract 1 and halve it. Thus, 23 can yield you 11 and 47. There’s a nice pattern among these solutions: 3, 5, 11, 23, 47, 95 — another nice exercise for mathematical readers to investigate.

Other Options

I settled on the 23-column option because it’s the most usable for real design applications. The other mathematical choices are much less so. For instance, let’s examine 11, the next-smallest option:

You can indeed split it into 2 and 3 columns, and even 4 and 6. But with the exception of the 2-column set-up, the gutters become overwhelming. The reverse problem afflicts the next-highest number for columns, 47 — compressing all the divisions into one chart now, since there are so many:

The gutters here are getting a little thin to separate text. And who really needs sixteenths or twenty-fourths of a text-block? I think 23 thus remains the best compromise among the possibilities: it has reasonable gutters, and you can lay text in the most common patterns of 1, 2, 3 or 4 columns.

Variations

You’re never tied to using the major grid lines, of course. I find that breaking them in half gives the smallest measure I reasonable ever need. A gap of that size can be used to separate images from text (like I did above) and define various typographic parameters.

Think about a 23-column vertical grid the next time you need a single, flexible page layout for copy.

Originally published at breakforsense.net on January 26, 2017.