Pi in the Sky

Flexible versus fixed width in web design

Publicado el 20 de Mayo, 2007 a las 12:57pm por Pi.
Categorías: Desarrollo, Sin Traducción, Diseño.

This article is intended to deal with a simple question, related to design applied to the web. Should web design allow for adaptable width columns? If not, then how wide should a column be?

There’s no easy nor short answer, that’s why this article is so long; I wanted to explore all the possibilities. If you were searching for an easy answer from an expert, search elsewhere. But if you are after a better understanding of the problem and of the possible answers, so you can choose the answer that is right for you, then keep reading. I’ve never been keen on “don’t do this, do that” quick answers; I often find more important and interesting to know why rather than what.

I haven’t formally studied design; however it’s an area that interests me, I’ve been attracted to and I practice as a hobby (although I’m awful at drawing). I like to learn about design, and I’ve had the good fortune to work with several designers in past years. One of them, Eduardo, is a renowned spanish typographer and designer, one of the few prominent typographers in Spain actually. He explained me several things about typography applied to computers, as he was quite interested in that specific field (and also horrified by some of the stuff done in it!)

One of the things he told me was regarding to the width of the text in a page; the line length shouldn’t be too long. A too long line makes the reader spend more time finding the beginning of the next line. I later learned that this has a physical explanation. Your eye has a part called the macula, which has more cone cells than the rest of the retina. This is the part you use to focus, so any vision activity that needs more acute resolution will automatically make you center your view over it, so your macula is used. Macula is the center of your vision, to speak so, it is the part you use to read, and it has a viewing angle of about 15 degrees. Anything beyond that arc falls under the normal resolution of the eye.

When you’re reading, and you reach the end of the line, if the line fits in that fifteen degree ark, the beginning of the line is still in your high resolution field of vision, so your eye automatically moves to the beginning of the next line without any effort. If the line is much larger than fifthen degrees, or you’re reading at an unappropiate distance, the beginning of the line is outside the viewing angle of your macula, causing your eye to search for the beginning of the line; an operation which will be even move complicated if your eyes aren’t correctly aligned with the text, or if the line is much too long.

The fifteen degree arc of the macula is why, historically, typographers and designers have always advised against too long lines. It’s an advice I’ve read one too many times in design books, articles, tips, etc. However, it’s not a definitive answer. While there has been a great deal of research about legibility of text (do not confuse with readability), line length is not a deciding factor about the lack of legibility. While excessive line lengths can make reading uncomfortable, where is the limit?

Typographers have varying opinions about how long a line should be. Some say that a line length of 30-40 letters is the ideal for printing (look at the columns of the newspaper), although most books will have around 50-60 letters per line. 60-70 are good for screen. Some sources say that more than 50 letters starts to be tiring, others say up to 80, 90 or even 100 are OK. The truth is that, as with the old serif vs. sans-serif battle, it depends on the application.

Various studies have demostrated that the best fonts for reading are serifed. This is because, according to those studies, the serifs (the small lines at the end of strokes in the letters) help with letter recognition. Other studies have demostrated too, that the simplicity of sans-serif typefaces, like Arial, help more with legibility. It’s quite agreed that, in the low resolution world of computer screens, sans-serif fonts are a better option; although this trend will probably change, judging by the increase of the display resolutions, and the new techniques to render text more clearly.

Another example is light text over a dark background vs. dark text over a light background. Many people say that light over dark is bad, has low legibility and strains the eyes. However, if it’s done correctly, light over dark can be as legible as its counterpart (with less weight and more spacing). Personally I would say that not looking at a bright almost-all-white screen for 5 hours would be better if you suffer from eye strain!

In typography, there are some things regarding legibility which are commonly agreed, but there are also other things in which typographers have quite oppossing beliefs, as shown in these examples. Serif vs sans-serif is one of the options still being debated; lowercase is better than uppercase is agreed; but line length is in the too many answers to choose from class and none of them, unless carried to an extreme, is determinant in legibility.

Most of the legibility research reaches to no hard conclusions; apparently, the reading process is notably strong, and can be adapted to a variety of situations. Changes in legibility factors like font size, letter and line spacing, font family, etc. return little differences (unless going to extremes). In short, studies on legibility don’t really come up with definitive results. Keep this in mind, because if you search enough, you’ll find defendants of pretty much any opinion regarding to typography and legibility.

In a recent study conducted in the Wichita State University, several readers were faced with short snippets of text (news) with varying line lengths in a browser. The purpose of the study was to examine the effects of line length on reading online news. The reason I chose this study as an example is that it was conducted over a browser; it has nothing to do with legibility in printing. Sadly, most of the legibility research has been based on printed text; there’s very little research done in computer screen media, except for limited stuff like font design and similar things.

The results of the study show quite small differences (although it’s significant that the best reading speed and comprehension came in lengths of 95 letters). More interesting in this study is not the results of reading speed, but rather the reader preferences. Some readers liked short lines and disliked long ones; other readers preferred long lines and found short lines constraining. Globally, the two least preferred lengths were both the shorter and longer ones. I think this is very significant.

So maybe all this comes down to personal preferences. I prefer books with medium to small printing, I guess others will prefer medium-to-large font size. But undoubtly, excessive line length will hinder legibility and reading comfort. But before answering the question of “but then what is the right line length?” I’ll point out a couple of things.

The undoubtly part clashes with trained readers. If you are accustomed to reading long line lengths, then you will be as good, fast and comfortable as with shorter lines. For example, I measured the line length of Wikipedia articles in my browser window, and it’s 163 letters long (approximately). Nowadays, screen widths of 1024 pixels are the norm, so many other people must be reading Wikipedia with approximately this length, or even more (since Wikipedia uses a rather small font size). I haven’t heard anyone whining about excessive line length there! Personally, I’m rather displeased when a site is just a narrow column in the center of my window, while big spaces at the sides remain unused, forcing me to use the vertical scrolling too much and too often.

Another point is that web pages are inherently flexible. If you write text in an HTML page, without any style, and display it in a browser, it adapts to the width of the window. Some say that it’s because the designers of the web weren’t graphic designers. I’m of the opinion that they just used the particularities of the computer screen and graphic interfaces: flexible width, unlimited height. Don’t forget that web design is computer oriented, so maybe all those great rules valid for printing aren’t so valid in the pixel space. (Actually, one of the sources I looked at call the line length a fundamental rule in book and magazine printing and it left me wondering why it should be applied to unfixed, ever varying screen media).

Still, if we agree that excessive line length is bad, then this means that we should limit line length. This is not a perfect solution in the software nor hardware world. Monitors are rather horizontal, and the current trend includes 16:9 screens which are even more horizontal. We have more horizontal space than vertical space. So we should use that horizontal space. Plus, restricting the width of a text deployed to a reader is the same as limiting the user’s options to layout that text. Some readers like to have as much information in the screen as possible; big white unused spaces are against the flexibility of our desktops which allow us how to place and display the information we want where we want.

A little corollary of this last point is that web pages usually don’t have any height; even if you’re making absolute top and bottom frames and leaving the user with a viewport in the middle, the content in that viewport usually scrolls vertically. Hence, the more you limit the text width, the more height the content will have, and that means excessive vertical scrolling is needed to read or browse the content; in the case of reading, readers will face frequent and constant scrolling due to the actual small amount of information being displayed at once. One thing that web designers agree on is that excessive scrolling is bad and makes reading uncomfortable. Scrolling is most of the times unavoidable, but that doesn’t mean we can abuse of it.

In the end I think line length is a matter of personal preference, and it’s up to everyone of us to decide whether we want to use a fixed width, or leave to the user to set the width as they please, and display our content in a flexible way.

Maybe after the reading this the big detractors of flexible, unlimited width have a different point of view of the subject or maybe not, after all, who am I? So let’s play the devils advocate and dig into the possibility of restricted line width. As I’ve explained, many typographers give many different answers. Given the nature of our quest, I’m inclined to being rather generous; screens have plenty horizontal space, and history talks about a line width of 80 characters (ah, the good old DOS days). If you’re going to limit line width, I think that 80 is good, 70 is starting to be a bit narrow, 60 is definitely too narrow. Maybe you’re risky and want to go up to 90 or 100, but if you’re limiting line width, 100 is starting to be excessive.

Don’t try to imitate others before thinking about it. I’ve seen a lot of online newspapers using rather narrow columns but they have their reasons. They want to be visually close to their printed brothers, and they often have photographs and stuff laid out in a way which makes it up for the narrow line lenght. Think of your needs, of your design, not of other people’s designs, unless they actually relate to yours. Think about the kind of readers you will have. It’s different to design for e-commerce than for a personal site. It’s different to design for a site which will hold programming code than a community web of fandom writers.

I>n the awkward world of pixel dimensions, 80 characters is not a very specific measurement. It depends a lot on the font used, font size, tracking… Well, CSS comes to help. Fortunately, CSS can use a variety of units for lengths, and one of them is the em, which is defined as the length of the current font. Technically, an em is actually the horizontal size of the font, so an em in a 12pt font will measure 12pt. (Note that usually this is the same as the length of an m letter in said font, and that fact is commonly used to define wrongly what an em is.) That means that it’s not an absolute unit, but a relative unit. So we can enclose our text in a box (a div) and give a relative width. Instead of saying 600px, we say 70em. That means that 70 letter m’s will fit; if the font is proportional (Times New Roman, Arial) then about 80 letters will fit (more or less). If the font is monospaced (Courier New, Lucida Console), then always 70 letters will fit. Experiment with this technique until you get the results you want.

The advantage of this technique is that if an user decides to increase the font size in the browser client (for example, using Ctrl-+ in Firefox), the width of the text will also increase. This is specially useful if you’re starting with a narrow text column. Any increase in the size will render the column too narrow compared to the text, if you’re using an absolute size. Using em units allows you to stay relative. And as Einstein said, pretty much everything is relative. And this is nothing new, as the W3C is recommending for years that web pages should be based on scalable designs.

That was for the bunch of designers who think that line length should never be too long; it’s an acceptable option, although I don’t consider it the only possibility. Actually, after all these years, I’m still in the other side: Text designed to be read in a computer screen must flow to fill the available viewport. In web design, that means using flexible widths. There are a variety of terms for this: liquid frames, fluid frames, unspecified width columns, flex-o-pages, or any other moniker that the CSS gurus are using in any moment.

Another way to get an opinion on this tpoic is to have a look at what the big sites are doing. Big sites, and I mean, the really big sites, sometimes use fixed with, and others flexible width. Examples? Well, besides the already mentioned Wikipedia, the majority of Microsoft.com doesn’t use fixed width, and that includes an enourmous knowledge base. Google.com uses variable width, but Yahoo.com uses fixed width (for the most part). Web Style Guide advices using fixed width, but their own pages use flexible width (talk about irony). These sites have good designers, and sometimes very well paid designers, who are supposed to know what is good and what is bad. If some big sites don’t use fixed width, maybe it’s because flexible width, and really long line lengths aren’t really that bad.

Why do I prefer to sacrifice legibility, allowing long and neverending lines? Well, call it pragmatism. If the user thinks the lines are too long, the user will narrow down the browser window. It’s easy. In my experience, there are two kinds of surfers: ones who always have the browser window in the same place (or maximized), and others who are constantly moving between windows, resizing them, etc. The first kind of user will be accustomed to long lines, and the second will gladly resize the window to meet their tastes. Well, that’s my theory, you might agree with it or not. So, if you’re up to it, allow the width of the text to adapt to the width of the window with your favorite technique. I like to use liquid frames. While it is not a perfect solution either, I don’t think it’s inherently wrong, as many designers propose.

However, I also agree that too long lines can be problematic. There are a few things you can do to increase the legibility, even with long lines. The first and most important is leading, or line height. Increasing the separation between the lines helps the eye in distinguishing each one, and detecting the beginning of the next line. Then, if you increase leading, you better increase tracking a little bit. Not too much, as excessive space between letters also decreases legibility. Be sure that you’re following the best practices like high contrast between text and background (black over cream or similar seems to be the best), legible and standard fonts like Times New Roman, Arial or Verdana, etc.

There’s a compromising middle term. Allow flexible width, but within some limits. This is achieved using the CSS properties min-width and max-width. Unfortunately, these properties are part of the CSS 2.1 specification, and older browsers like Internet Explorer 6 simply ignore them (curiously, IE6 can use them for imgs, but not for divs). That’s too bad, because liquid frames could be really useful and great if you could tell them to have, for example, a minimum width of 50 characters and a maximum of 100 characters. You’d allow the user to adapt the width of the content to their needs or tastes, while still controlling design and legibility.

You can still achive the same result as min-width and max-width in IE 6 using expressions. E.g. something like

SomeElement {
max-width: 80em;
width: expression(eval(Math.min(this.clientWidth/fontwidth,80)+"em"));
}

That’s assuming you can figure out what the fontwidth is.

Another option, developed by Tom Howard, is Resolution Independent Web Design (Proof of Concept). He has devised a method of resizing every page element to fit the width of the browser window, including the font size. It is a very interesting and unique approach, a kind of dynamic zoom which works pretty well, although I’m not sure if it has immediate application in web design. Read his article for more information.

An alternative to these CSS properties is using dynamically-generated style sheets. CSS is not a programming language, but you can create CSS on the fly using server-side scripts like PHP or Perl. Methods for this are available via your favorite searcher - in short, you replace the CSS file with a PHP file which generates one or another CSS content depending on variables like window width. The problem with this approach is that it works only when the page loads and the reader would need to click something to specify the width they want.

There might be other options, involving client-side scripting like JavaScript, but I’m not going any further down this road. If CSS is tricky to get going between different browsers, JavaScript only adds up to the problem. Blame IE6!

Well, I’ve tried to explore all the possibilities, and explain different views on each one, listing advantages, opinions and whatnot. At least I hope I’ve gave to you a broader view than the usual “do this, don’t do that” answers which are usually found.

This article is co-written with Tom Howard, who proof-read it, and provided corrections, improvements and additions. Tom is the maintainer of Vistered Little, and you can find him at Windy Road. Many thanks, Tom.

References and further reading:
Line length and fixed versus flexible at Web Style Guide (2nd Edition).
The Effects of Line Length on Reading Online News, a study of the Software Usability Research Laboratory at Wichita State University.
Legibility in typography in Wikipedia.
Resolution Independent Web Design (Proof of Concept), an article by Tom Howard.
Minimum and maximum widths and length units in the CSS 2.1 recommendation.
five_simple_steps_to_better_typography/”>Five simple steps to better typography, an example of “do this, don’t do that” (with actually good advices, what do you think!)
Free articles and resources at WebCredible, an online consultant firm dealing with web design and usability.

3 comentarios.

Kitten Auth para phpBB »« Todavía estoy vivo (más o menos

Kitten Auth para phpBB »« Todavía estoy vivo (más o menos

Pi in the Sky funciona con WordPress. Vestido con Vistered Little. Alojado en MochaHost.