Longer lines require the reader
to move their focal point as they read. If the line is too long, when
the reader is focused on the end of one line, they lose focus on the
beginning of the next line. This can make reading more difficult
resulting in a loss of comprehension."
(Image size controlled by VariableHTML / Variable Image Sizing)
We did a Google search for "words per line for readability".
Here are a few of the results:
Wikipedia.com: optimized at approximately 10 words per
line
Webreference.com: There is an optimum line length for
perfect legibility in print, approximately 10-12 words per
line, and, in the very same article: I still try to have
between 10-15 words per line no matter what the
resolution
Bastoky.com: Use 40 to 70 characters per line (approx.
8 to 12 words).
Webstyleguide.com: At normal reading distances the arc of
the visual field covered by the macula is only a few inches
wide-about the width of a well-designed column of text, or about
twelve words per line, same article again, When designing a
fixed-width layout, set text columns to no wider than 365 pixels.
With standard text, this yields a line of about fifty characters,
averaging about nine to ten words per line.
The Great Thing about Standards is There are So Many to
Choose From!
So, it looks like the average of the standards, if there is such a
thing, is to make your lines 10 to 12 words long if possible. If not,
try to stay within 8 to 15 words per line.
The length of a line really depends on the size of the text. An em
is the horizontal equivalent of the height of the text and there are
about 2.6 ems per word (see below). The text size is expressed in
points and there are 1 ⅓ pixels per point.
Using the bold line in the following table; if your text is 11 point,
that is really 14 ⅔ pixels rounded to 15 pixel text. Your
optimum line length should be between 390 and 468 pixels wide, but
you could stretch that to 312 to 585 pixels.
Point
Size |
1 em =
1 ⅓
pixels
per pt |
words per line |
| 8 |
10 |
12 |
15 |
| 2.6 ems per word |
| 20.8 |
26 |
31.2 |
39 |
| min |
optimum |
max |
| 10 |
13 |
270 |
338 |
406 |
507 |
| 11 |
15 |
312 |
390 |
468 |
585 |
| 12 |
16 |
333 |
416 |
499 |
624 |
| 14 |
19 |
395 |
494 |
593 |
741 |
| 15 |
20 |
416 |
520 |
624 |
780 |
| 16 |
21 |
437 |
546 |
655 |
819 |
The Numbers
If you are not a math geek, and you trust the numbers we used, you
can skip the rest of this page.
Pixels per Point
The typographic point was first established in 1799, long before the
concept of display pixels or ink jet dots per inch. A point is
approximately 0.013837 of an inch or 72.27 points per inch. This
number has been rounded to 72 points per inch for simplicity in most
modern situations.
Taking this a step further, many of today’s computer screens have
resolutions of approximately 100 pixels per inch. The ratio between
72 and 100 is 1.388888... pixels per point, but the ratio between 72
points and 96 pixels is exactly 1 ⅓ pixels per point.
This ratio also exists for computer printers. We used a graphic
editor to create an image that was 700 pixels wide, and then we set
our printer margins to 0.75 of an inch left and right, leaving a
printable area of 7 inches. When we printed the test graphic, the
right edge was chopped off. We then placed 3 vertical lines near the
right edge of the graphic at 671, 672, and 673 pixels and printed the
graphic again. The 671 and 672 lines printed, but not the 673 line.
This experiment illustrated that 7 inches of printed area was equal to
672 pixels, or 96 pixels per inch. The ratio was confirmed.
In the next test we created an HTML table with one pixel borders and
two columns. The width of the first column was 5 ems and the width of
the second column was 15 ems. We displayed this table at various
point sizes, captured the screen image, and then used our graphic
editor to count both column widths in pixels. The difference between
the two column widths is the width of 10 ems. The results verified
the ratio as 1 1/3 pixels per point "rounded".
Lorum ipsum
This is the name given to the commonly used placeholder text used in
the publishing and graphic design. Here is the start of the actual
paragraph of what looks like nonsense words:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
We used this text to determine the number of ems per word.
The results of our tests are in the following chart:
Point
Size |
1 ⅓
px / pt |
Pixel
Size |
Column Width |
| 25 em |
26 em |
30 em |
31 em |
33 em |
35 em |
40 em |
| 10 |
13 1/3 |
13 |
325 |
338 |
390 |
403 |
429 |
455 |
455 |
| 11 |
14 2/3 |
15 |
375 |
390 |
450 |
465 |
495 |
525 |
525 |
| 12 |
16 |
16 |
400 |
416 |
480 |
496 |
528 |
560 |
560 |
| 14 |
18 2/3 |
19 |
475 |
494 |
570 |
589 |
627 |
665 |
665 |
| 15 |
20 |
20 |
500 |
520 |
600 |
620 |
660 |
700 |
700 |
| 16 |
21 1/3 |
21 |
525 |
546 |
630 |
651 |
693 |
735 |
735 |
| "Lorem ..." word count |
9.67 |
10 |
11.50 |
12 |
12.80 |
13.60 |
15.75 |
| Ems per word |
2.59 |
2.60 |
2.61 |
2.58 |
2.58 |
2.57 |
2.54 |
The order in which all this occurs is important. The instant you
asked for 11 point text it was immediately converted to 11 times
1 ⅓ equals 14 ⅔ rounded to 15 pixel text. If you then
ask for 10 ems, you are not asking for 10 times 11 points, you are
asking for 10 times 15 pixels.
