This article askes the question: "Is there an ideal line length for content?"
To quote a passage from "Web Style Guide - Basic design principles for creating web sites".
The ideal line length for text layout is based on the physiology of the human eye... At normal reading distance the arc of the visual field is only a few inches - about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.
The challenge
I'd like to design a site that uses optimal line lengths. I also want the line length to stay within the optimal range no matter what default font size the user has set in their browser. Is it possible?
Layout methods
Most websites lay out content used either fixed width (set to an absolute measurement) or flexible width (set to a percentage of the screen, so that it scales in or out based on the browser window). Both of these methods have problems where line-length and differing default font sizes are concerned.
Fixed-width columns can be used to set column widths that are ideal if users have their fonts set to browser defaults. An example would be a column set to 420 pixels wide. This is almost an ideal line length for users who have their fonts set to around 14-16px - normal browser defaults, but less than ideal for users who have their fonts set much larger or smaller. Pixels are an absolute measurement that does not take into account the size of the font.
Flexible-width columns also have problems. You cannot control the users browser window, so column widths will vary greatly from user to user. This is often touted as the ideal solution, as users have control over the width of their browser window and can decide for themselves a comfortable line length. There are two problems with this.
The first problem is having to drag your browser window in and out as you jump around from site to site - although it sounds trivial, it can become a drag, and why should users have to change their window size to view a site?
The second problem is placing the responsibility on the user. Some users do not know that they can rescale their browser window, and may assume they have to read very wide lines of content. This is less than ideal.
A solution
The solution may be to set column widths using em's. To understand why em's can create an ideal line width we first need to establish what exactly is an em...
In traditional typesetting, an em is defined as the width of the uppercase M in the current face and point size. An em-dash was traditionally the width of the capital M, an en-dash was half the width of a capital M and an em quad, a unit of spacing material usually used for paragraph indentation, was the square of a capital M.
In screen representation, an em is more properly defined as simply the current point size. For example, in 12-point type, an em is a distance of 12 points. An em quad is always a square of the size of type to which it belongs. So, an em quad of 12pt type is 12pt high x 12pt wide.
In CSS, an em is a relative measure of length that inherits size information from parent elements. If the parent element is the BODY then the size of the element is actually determined by the user's browser font settings. So, in a default Internet Explorer install (where the default font size is 16px), 1em will be 16px.
Using a standard piece of text like "Lorem ipsum..." it seems that an ideal like length in em's is about 30-35ems. This is expressed with the rule:
body {
width: 30em;
}
The beauty of this is that this measurement relates the users font size. If you come to a site with a default font size of smaller or larger, the column width will always stay within the optimal range.
One step further
To take this one step further, the ultimate flexibility would be to specify column widths within a range. This allows the user some degree of control over the line length, but never lets it exceed comfortable reading lengths.
This could be defined with the following rules:
body {
min-width: 25em;
max-width: 33em;
}
Translations
- Russian thanks to Nickolas Loiko
- Italian thanks to Luca Magnani