When designing how content should be displayed an important factor to consider is line length. If it’s too short the eyes can become tired from constantly moving to the next line, if it’s too long the reader can get lost in the middle of a sentence and it becomes difficult to find the next line.

Follow The Rule

To address this a recommended rule to follow is to aim for line lengths of around 45-75 characters^[1], this includes spaces and punctuation too. In well set pieces of text 75 characters and more can be acceptable, but it is wise to avoid in cases of continuous text.

An example of this can be found on Nina Stössinger’s homepage. On my 24″ display it contains character lengths of 75-82 per line, and on Mark Boulton’s website I found that his character count reaches as much as 97 on some lines. Having said that, the relatively large font size he uses does help compensate for this, but I still wouldn’t advise it when reading large bodies of text.

Traditional type has always been measured vertically in picas and points. A pica is about 1/72 of a foot (4.23333333 millimetres) , or 1/6 of an inch and 1 pica is equal to 12 points (1pt = 0.3527777775 millimetres). The horizontal space of a line is measured in ems, which is a relative measurement. For example if your font size is 16pt then 1em = 16pt, if it’s 12pt then 1em = 12pt, so it is relative to your font size.

Relative Measurements

Ems are particularly useful measurement when setting the width of a body of text because you can give it a width that is relative to the font size. This is ideal because Robert Bringhurst states that the optimum width actually depends on your font size.

“Define the word space to suit the size and natural letterfit of the font”

-Robert Bringhurst, The elements of Typographic Style

The first step to working out this ideal measurement is to decide on a font size for your main body of text, I like to play around with sizes to find the sweet spot at which my chosen font looks best. Once you have a font size measure the length of your fonts lowercase alphabet, abcdefghijklmnopqrstuvwxyz^[2]. An acceptable average is 30pts, but if you want to be thorough it’s best to just measure the lowercase alphabet each time.

When you have your measurement you then multiply it by your ideal font size then divide by 12 (1 pica). So it will look something like this.

30×12 = 360/12 = 30 picas

So our lowercase alphabet length is 360pts and our line length in picas is 30. We now take our measurements to a copyfitting table, I use the one provided on page 29 (version 3.2) of Robert Bringhurst’s The Elements of Typographic Style, if you don’t have your own copy then I strongly suggest you purchase one, but for now you can find a table at Tex-programmer^[3].

It can be tricky to comprehend at first but the numbers down the left are your lowercase alphabet lengths and the numbers running across the top are your line lengths in picas. Simply find where the lines meet and you should have your ideal line length, mine was 30em.

Responsive Frameworks

When it comes to designing content for the screen, the designer has much less control over the appearance of their content and will ultimately have to allow for a certain level of flexibility. We will cover this separately and in much more detail in our next article.

Footnotes

1. [1]Christian Holst, 01/11/2011, Readability: the Optimal Line Length [Baymard Institute], [online]. Available: http://baymard.com/blog/line-length-readability [18/07/2013].
2. [2]Robert Bringhurst, 2004. The Elements of Typographic Style. Version 3.2 USA: (pp.17-29). Hartley and Marks Publishers.
3. [3]Unknown, 07/03/2008, Tex: Number of characters per line in LaTeX – tex-program.itags.org [Tex-Programmer], [online]. Available: http://tex-program.itags.org/q_tex_133907.html [07/08/2013].