If you've bought a new monitor, TV, or laptop in the last couple of years, then the chances are it's significantly wider than it is tall. This trend has stretched lines of text beyond comprehensibility.
Let's do an experiment, maximize your browser and head to Wikipedia. Try reading it. Now, shrink the window until it takes up a horizontal half of your screen. Try again. Doesn't that just feel better? Maybe it's because this is how we've been casually reading for centuries.
A modern screen has an aspect ratio of 16:10, that means that it is 1.6 times wider than it is tall.
The older standard is 4:3, or 1.33.
A pocket paperback book is 3:5, or 0.6.
That's dramatic, but it gets worse. In general, desktop environments are not optimized for wide screens. By default, Firefox maximized in Windows 7 at 1680x1050 has about 132 pixels above the content and 62 pixels below the content, squeezing the aspect ratio to around 19:10.
Mac OS X, Gnome, and KDE all default to give less vertical real estate. The effect of the desktop can be mostly mitigated with vertically oriented panels, auto-hiding, and transparency. Some window managers do these things better than others. Microsoft's panel works beautifully on the left side of the desktop. Gnome's panels do everything wrong, but Avant Window Navigator is an elegant solution for Linux. I'm not an expert, but I believe Mac users are eternally stuck with the menu bar.
Google know about the wide problem. Because they decided to render their windows themselves, the top height of Google Chrome is about half that of Firefox, with Internet Explorer falling somewhere between the two. Chrome also saves 64 pixels at the bottom because its status bar is usually hidden. Hiding your bookmarks toolbar regains some vertical space. On Firefox, you can customize you toolbar to use small icons and there are many themes that try to minimize the user interface.
A wide screen can be ideal. The human eye sees an aspect ratio somewhere near 1.75 so it's not surprising that films usually have high aspect ratios. Wide screens can also be ideal for reading. If you turn your monitor 90 degrees, it would have a 10:16, or 0.625, aspect ratio, amazingly close to that of a book. In an ideal world all screens would rotate. Until then, let's adapt.
Web sites almost always grow downwards. A single column produces very long lines.
Using CSS to create columns is a popular technique for managing excessive width. The drawback is that space is underutilized by the actual content of the page.
CSS3 provides support for natural multi-column layouts. By default, these columns expand to fill the width of the screen before getting longer. Notice that reading these columns requires excessive scrolling.
We can force CSS3 columns to fill a fixed vertical height before growing horizontally by setting the height attribute. If we set the column height to 100% then the columns will grow no bigger than the window height. Vertical scrolling is eliminated.
This format closely follows the archetypes in print media. Screen space is utilized optimally without sacrificing readability.