Home Designing for column width

Designing for column width

.coltest { -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; }

A newspaper column width is typically just under two inches. A paper back book is usually under 4 inches wide per page. The size of a typical computer display is climbing over 17 inches and this is isn't necessarily a good thing.

Newspapers and books are designed to reduce eye strain and make it easy to read for longer periods of time. They do this by allowing several muscle groups in the eye to relax. In a newspaper your eye will track vertically down a column without needing to jog back and forth. The column width should be narrow enough to scan down. As your eye reaches the end of a line it moves straight down without slowing down. Because the lines are short you can 'skim' an article quickly without moving your eye left to right.

A computer article on the other hand isn't as simple. The eye has to track horizontally across the width of the page. The movement isn't smooth because when you reach the end of a line you have to change direction and scan back to find were the next line begins. Reading large amounts of content is much more difficult this way and can cause blurry eyes and general eye strain.

There are four core technologies that are needed to properly design for column widths. The first is the ability to layout and balance columns, the second is hyphenation. Recently the New York Times released an application that does both. This application fills a gap that CSS and the web haven't been able to fill (yet).

Balancing columns means that you take two or more columns and you balance the number of lines in each column so that the combined columns form a box. This is a useful design tool because it allows you to have an easy to read block of text that's sized to the available screen space.

When you start using columns you realize that there's a problem. Long words will tend to end-up on a line by themselves. This looks silly and makes the document harder to read. The solution is hyphenation. When a long word is close to the edge of a column a hyphenation dictionary can determine where the word can be broken. A typical dictionary shows these possible hyphenation points as dots in the definition: hy·phen·ate. The hyphen gives the columns a better appearance and again helps your eye track to the next line.

The last missing piece are page jumps. What happens if you have too much text in a column? On the web the solution is to scroll. In a newspaper it's a jump. A jump is a link to the place were the text continues. This allows you to put the important content up-front and keep the article details deeper in the site without needing to scroll.

Columns, hyphenation, balanced columns and jumps are all great design tools and they can be used in designs to make text easier to read.

Now if we could only get these features into the browsers ;)

This post is licensed under CC BY 4.0 by the author.