BitWareSolutions

Readability

Web site readability will become an ever-increasing factor as the baby boomers enter their 60's. Larger text and easier to read columns make sites more acceptable to those wearing bifocals. Even if you are designing a site to advertise your hi-tech computer game to the younger generation, grandma and grandpa will still be visiting your site to purchase the game for their grandchildren!

The most important factor in determining the readability of a column of text is the physical design of the human eye. The macula, which makes up only about 15% of the area of the retina, is used for high visual acuity tasks like reading. At normal reading distances the arc of this high visibility field covers an ideal line length of about twelve words. Research shows that reading slows and retention rates fall as line lengths begin to exceed this ideal width because the reader then needs to use the muscles of the eye or neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on a page, the reader is easily lost and must hunt for the beginning of the next line.

A column width of about 30 times the point size of the text, or 30 ems, is approximately the correct size for twelve words. Some designers recommend a column width between 25 and 33 ems while others recommend a column width between 30 and 35 ems. The following table shows how these "em" values are converted into pixel widths at various text point sizes:

Font
Size		 Raw
Factor		 Pixel
Factor		 25 em
Pixels		 30 em
Pixels		 33 em
Pixels		 35 em
Pixels
10 13 1/3 13 325 390 429 455
11 14 2/3 15 375 450 495 525
12 16 16 400 480 528 560
14 18 2/3 19 475 570 627 665
15 20 20 500 600 660 700
16 21 1/3 21 525 630 693 735
20 26 2/3 27 675 810 891 945
24 32 32 800 960 1056 1120
Words     11.36 13.78 15.25 16.37
CPL     39.17 44.9 49.89 53.62
  • Font Size - This is a printer's measurement. It is measured in points. There are 12 points to a pica and approximately 6 picas to an inch. So a point is about 1/72 of an inch.
  • Raw Factor - A browser displays everything in pixels or dots. The browser uses a factor of 1 1/3 as a raw conversion factor to convert points to pixels.
  • Pixel Factor - This raw factor is then rounded to the nearest whole pixel when the browser creates its characters.
  • Ems - This is another printer's term. The point size is a vertical measurement of the size of the font from the top of the tallest capital letter to the bottom of the lowest lower case letter that descends below the base line like g or p or q or y. An em is the horizontal equivalent of this measurement.
  • Words - There is a standard paragraph that typographers use to measure type. We set that paragraph in the various font sizes, and then counted the words on each line. Words is the average word count per line at each line length. NOTE: each line should break exactly the same when displayed at 10 point 325 pixels wide as it does when displayed at 24 point 800 pixels wide.
  • CPL - Characters per line, counting the characters per line the same as words per line were counted above.

Since the Variable HTML™ script includes a feature that allows each visitor to select the text size that they are most comfortable reading, it also includes a control feature that allows the trip points for changing designs to be defined per point size. This feature is a bit complicated to be discussed here. It is discussed in more detail on the Variable Control page of our Variable Style™ website.

North East, Md Chamber of Commerce


Elkton, Md Chamber of Commerce


Cecil County Chamber of Commerce


Harford County Chamber of Commerce