We’ve all read a magazine or a newspaper before. Noticed how text is usually split into multiple columns? Ever wondered why? Some folks figured that a human being can’t cope with really long lines of text and so decided that ideally, lines of text should contain about 60 characters. This is short enough for the reader to easily find the next line of text and still long enough to prevent constant transitions from line to line. And since newspaper formats are quite large and no-one would ever read them, if lines of text spanned the whole page, they decided to split text up in columns. And we like it that way.
A few years later, in 2001 to be exact, w3 said “Hey, our displays are getting too wide for one line of text as well”, and so decided to include multiple column layouts in css3. Years have passed by, and today, in 2008, Mozilla browsers and Safari support this feature. I’m not sure if any other browser does as well.
So how does it work? In a block of text, a web developer can specify either an optimal width of a single column, or the number of columns. He can also specify a gap between two columns, and… not much more. Given text would then be intelligently split into multiple columns of equal heights and widths.
So what are the downsides? As we all know, there’s one huge difference between a printed page and a webpage. A printed page will always look the same, no matter who or where reads it. A webpage on the other hand won’t. Some people may read it in a bigger text size, some prefer a different font family, etc. As good of an invention as columns were, some care has to be taken while using them.
First, and one of the bigger typographer’s fears, are the so called widows and orphans. These are single (first or last) lines of paragraph, which stand alone. Even though not all that disturbing to the reader, they look odd and are never supposed to be left in a printed page. The designer should take care of them either by modifying the text or applying a different design. But who’ll take care of them on the web, where lines may split differently for me than they do for you?
Researches show that text in columns is best readable when justified (you know, not left or right aligned, but both at the same time). But justifying short lines of text can lead to a few problems, such as oversized word spacing and rivers of white. This is regulated in desktop publishing by word hyphenation (splitting a word in two lines), but css draft of it is poor and “up-in-the-air”. But also with hyphenation enabled, a designer always has to check that something ugly doesn’t come out on the final print. Again, no-one can do this for websites.
I guess both problems can be minimized with proper implementation. But I have one more up my sleeve. In newspapers, text is optimized so when you reach an end of a column, you can easily move to the next one. That’s easily done by moving your eyes and head a bit. In websites, though, you read long texts by scrolling. Nobody can guarantee you that the height of a column won’t exceed you browser window’s height. So imagine scrolling around a page with 3 columns, all twice the height of your browser window. For all I know, you might have downsized your window and enlarged your fonts to achieve this, but that can’t be an excuse for ignoring this problem. It’s gonna be a pain in the ass. Scroll down, up, down, up and down again to read one block of text? No thanks. I prefer the “down down” technique.
So I’m not really sure I want to see any columns in web pages I’m reading. Except maybe if a website can guarantee a designer that’s gonna optimize splitting text into columns considering my browser, my preferred font families, my font size and my browser window size. It’s just not something a today’s browser could do on it’s own.
The need for columns is most obvious with fluid width websites, such as wikipedia and today’s wide screen displays. Mostly because people are still buying them to run their Internet Explorer in full 1920 pixels. Too bad no operating system allows us to run two windows side by side to better utilize the screen space.
And all this brings us to why I prefer fixed-width designs. Text is just much easier to read, when someone who knows what he’s doing takes care of it’s width. Just keep in mind, optimal line length on the web is cca. 30 to 35em.
