In addition to letter spacing and line height, optimum line length, the number of characters per line, affects readability and user experience. A long line of text produces fatigue and a short line of text can be distracting.
Most lines on this blog post are too long, with well over 100 characters per line, unless you are reading this on a mobile phone with a low resolution. Thanks to the image on the right, these introduction paragraphs have around 70 characters per line – when viewed on a desktop – making it close to optimal. (feel free to check the number of characters on lettercount.com/)
75 characters per line, including spaces, is usually the maximum for a block of text with 50-60 being the optimum range. Unless a line is short for effect, such as emphasizing relationships between words as in poetry, readers begin to skip words as their eyes move down the page instead of moving from left to right, because quick side-to-side movements fatigue the eyes.
Responsive vs. Fixed Website Design
Since line length is so important as a fatigue factor, the traditional advice is that web pages should be set to a fixed width rather than being liquid, which means they are allowed to contract and expand. On a desktop computer, a fixed width remains a fixed width even when the window if much wider. With liquid layouts too narrow to read comfortably, readers can become fatigued and stop reading for reasons that have nothing to do with your content. However, since so many people are reading on so many different sized devices now, the new advice is that responsive is a plus.
Designers generally don’t like responsive page design because it prevents controlling the look of the page. It allows graphics to move around and headlines to end up on two lines with word breaks that can change comprehension. A compromise is to have two layouts, one responsive for mobile devices and tablets and one fixed for desktops. (This is almost twice the work.)
The Golden Ration Typography Calculator
A narrow text will require smaller type in order to maintain a line width that is conducive to being read. If you are designing specifically for a device with known measurements, like an iPad, you can adjust type size and line height accordingly.
For calculating the relationship between text size and line length, you can use the Golden Ratio Typography Calculator by Chris Pearson of Pearsonified (Yes, that is the right spelling.)
The Golden Ratio Typography Calculator addresses one of the most difficult aspects of designing a text: to layout type in such a way that it is most readable and attractive. Most typographers and graphic designers have had years of visual experience that allows them to choose the most attractive and readable font sizes, widths, and line lengths intuitively. Even with comparable experience, however, doing this on the web can be a challenge. Chris Pearson has designed a calculator that produces several optimal sizes and proportions given your preferences or the requirement of a specific project.
Calculating Sizes, Heights, and Widths
The calculator will (1) calculate the appropriate font size, line height, content width, and characters per line, and paragraph spacing; and (2) allow you to choose a font that is set to these numbers in a block of text. It will show you the optimum settings for a given content width, number of characters per line, for your chosen font and size, etc.
For 16pt type, for example, in Hoefler Text the optimum settings are:
Font Size: 16, Line Height: 25, Content Width: 600, Approx.92, Characters Per Line: 85.
In Verdana, these settings are:
Font Size: 16, Line Height: 25, Content Width: 600, Approx. CPL: 74
If you click on the font size, a box will open giving you the optimum settings for headline and primary and secondary text sizes.
You may not agree with the settings Chris finds optimal, but it is an excellent place to start.