Reading momentum

In most western printed media (books, magazines, etc), the reading momentum is horizontal. A composition’s primary goal is usually to guide the reader’s eye from the top left of the layout to the bottom right—at which point they turn the page, bringing their eye back to the top left, ready to go again.

One of the most effective ways to do this is by laying the content out in columns. Vertical bars cause our eyes to instinctively scan across them horizontally, so column-based compositions tend to have a strong horizontal reading momentum.

However, on the web we’re scrolling through content vertically, not turning pages horizontally, so we need the reading momentum to be vertical, not horizontal. When we use a column-based composition on the web, it guides the reader’s eyes horizontally, just as in print… except this time when their eyes get to the right edge of the screen there’s nowhere to go. Since our compositions are fighting against the web’s natural reading momentum, we’ve had to resort to adding little ‘scroll down’ arrows to prevent readers getting confused.

To create compositions that have an in-built vertical reading momentum, we need to base them on horizontal bars (or, y’know, rows) that will guide the reader’s eye downwards.

I’m not saying columns are irrelevant in web design. Just as a baseline grid fills a strong supporting role in print, columns can still be used to great effect on the web, but they shouldn’t be our primary concern. When designing for the web (or any medium with a vertical reading momentum), the vertical grid should take the lead. The backbone of our compositions should be rows, not columns.

Next: Vertical pacing