Something that has always concerned me about ‘fluid’ website layouts is the horrific length that the lines of text can stretch to under certain resolutions. Now I’m fully aware that users with wide screen monitors and similar resolutions do not exactly take up the bulk of the web viewing public, but, as we know from constant blathering reminders, ‘Content is King’, so this got me thinking about how important the length of the lines in a text passage are for the reader on the web.

No one likes reading long (as in 30-40 words per line) lines of text, simply because it is much easier to read in a sort of Z shaped pattern: read a line left to right, and then dropping down to the start of the next line diagonallyOr right to left or up to down, depending on the dialect. For this, I’ll make all observations of English writing, since anyone who is reading this will probably have English as their first language anyway.The angle between these two movements, when looking at reading comfortably, tends to be an angle around 5-15 degrees. Having it any smaller than this, which is what happens when lines of text are long, makes the read uncomfortable as the lines seem more cramped than they really are: this works in a similar way as white space does. The ideas behind this are evident in all sorts of printed media as well, though newspapers tend to take a more extreme approach by using columns. Columns means that this angle between movements is large, though in actual fact, compared to a book (in most cases) the actual space between lines is less.

Now it may seem that my ideas are flying all over the placeWhich they are, and it’s getting awfully noisy!, but the main point behind this that I’m trying to make is that the length of the lines of text in content that is meant to be read by the end user is as important a consideration in design as fonts, font sizes and line spacing. Therefore when designing a new layout or system, there needs to be appropriate steps taken so that this factor is taken into account.

However, saying this brings to the light that an ideal line length can only be decided after the other three factors have been chosen.Therefore this is more a pseudo-layout issue than a direct text issue, which is an important point to make. For instance, if the main text you have for the user read is big and bold, you can get away with having a larger width, which has been decided after choosing font size and family, but beware having a small width in the same way. Shaun Inman has got away with this by having large line spacing. Similarly, small text is most comfortably read within an area of small width, such as here. One of the reasons for this being comfortable is that small text, whilst being cute and clever, is actually of a size that normally requires you to get closer to the screen, which more often than not can become uncomfortable very quickly. And there is also the danger of the width of the text area being too small, as opposed to too large, having about 2-3 words per line. This is where fluid layouts are particularly criminal: sidebars often tend to squash the main content into a section of mere nanometres, a problem that must also not be forgotten.

In terms of a solution to this, where as with a fixed layout this is normally taken care of fairly well, the idea behind fluid layouts needs to be modified to allow perhaps a maximum and minimum width to be set to avoid such a problem. What this solution maybe I do not know, or have not yet come across yet, but perhaps I might work on it once I get some time. Thanks for indulging in my rant.

Update: It seems I wrote this a bit late: just found an interesting quick JS fix for this for people with wide resolutions over at Shaun Inman Though this is only a fix.