Russ Weakley
03-May-03
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 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.
Web Style Guide - Basic Design Principles for Creating
Website
Patrick J. Lynch and Sarah Horton
2nd edition, page 97.
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:
width: 30em;
The beauty of this is that this measurement relates
the 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.
Here is an example of an EM-defined column. If you
change your browsers default font size (or click on
the sample links at the left), the column will automatically
scale with the font size.
I wouldn't suggest using this for navigation blocks
or detailed layouts, but for layouts where the actual
content is important, this solution could be considered
ideal.
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:
min-width: 25em;
max-width: 33em;
Here is an example of an EM-defined column with a
minimum and maximum setting. Of course, this feature
is not supported by some modern browsers (Internet
Explorer for Mac/Windows) but in the near future this
will become a standard supported feature. If you can't
wait for Internet Explorer, Svend Tofte has written
an excellent article on how to make IE emulate the
behavior of max-width.
What do you think. Agree or disagree? Send
us your comments.
