Max Design

Exciting, engaging websites

  • Home
  • About
  • News
  • Articles
  • Training
  • CSS

Recent Posts

  • Links for light reading (13/10/15)
  • Links for light reading (5/10/15)
  • Links for light reading (21/8/15)
  • Links for light reading (10/8/15)
  • Links for light reading (27/7/15)

Follow

  • Twitter
  • Linkedin
  • Slideshare

Ideal line length in ems

May 25, 2013 by Russ Weakley

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:

  1. “de Finibus Bonorum et Malorum”, by Cicero
  2. “Far far away”
  3. “The Sorrows of Werther”, J. W. von Goethe
  4. “Metamorphosis”, Franz Kafka
  5. “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”.

Filed Under: Articles

Contact us

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter
© 2016 Max Design

Copyright © 2022 · Parallax Pro Theme on Genesis Framework · WordPress · Log in