By The Numbers
If you are not a math geek, this page might get pretty boring, so we
will just start with the result.
- The ratio of words to ems is about 2.6 ems per word.
- The best line length is about 10 to 12 words per line.
- A screen displays 1 1/3 pixels per point.
OK, now to the boring math and research stuff.
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 1/3 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 1/3
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 |
|
