Let’s assume that you have a chunk of body copy and you place it inside a container.
Question 1: is there an optimal line length for copy?
The optimal line length for your body text is considered to be 50-70 characters per line.
Question 2: What type of unit should you use to control the container width?
The best unit for setting the width of the container is “em” units as they scale with the font-size.
Question 3: How do we convert 50-75 characters into ems?
This is the hardest question as the content itself can affect how many characters appear per line.
I decided to do an experiment with a range of well known texts:
- “de Finibus Bonorum et Malorum”, by Cicero
- “Far far away”
- “The Sorrows of Werther”, J. W. von Goethe
- “Metamorphosis”, Franz Kafka
- “The quick brown fox” pangram
I took ten lines of text from each of these different examples, and then measured how many characters appeared per line at a range of different “em” widths.
Here is the sample page to show how the measuring was done.
Below is a table of the results, including an overall average across all five example texts.
Key to table
- 01: Column width in ems
- 02: “de Finibus Bonorum et Malorum”, by Cicero
- 03: “Far far away”
- 04″ “The Sorrows of Werther”, J. W. von Goethe
- 05: “Metamorphosis”, Franz Kafka
- 06: “The quick brown fox” pangram
- 07: Average characters over 10 lines
- 08: Average characters per line
| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 |
|---|---|---|---|---|---|---|---|
| 21 | 496 | 501 | 499 | 488 | 478 | 492.4 | 49 |
| 22 | 510 | 509 | 529 | 534 | 514 | 519.2 | 52 |
| 23 | 536 | 533 | 556 | 536 | 533 | 538.8 | 54 |
| 24 | 576 | 579 | 581 | 565 | 554 | 571 | 57 |
| 25 | 589 | 579 | 585 | 598 | 588 | 587.8 | 59 |
| 26 | 612 | 608 | 606 | 610 | 605 | 608.2 | 61 |
| 27 | 627 | 648 | 644 | 633 | 623 | 635 | 64 |
| 28 | 659 | 659 | 666 | 663 | 652 | 659.8 | 66 |
| 29 | 687 | 694 | 701 | 700 | 665 | 689.4 | 69 |
| 30 | 713 | 716 | 714 | 716 | 699 | 711.6 | 71 |
As you can see, the average seems to suggest that your container width should be set between the narrowest width of 21em (approx 49 characters per line) to the widest width of 30em (approx 71 characters per line).
I hope this is helpful for anyone asking the question “How wide should my columns be in ems”.