Using multiple columns to limit words per line

Web Style Guide: "The limiting factor for the length of a printed or displayed line is the physical design of the human eye. The macula is the area of the eye used for high acuity vision, reading! It is a small oval-shaped spot near the center of the retina.

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.

A-         A+

Table of Content

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions