In typography there are a number of metrics and characteristics that are helpful indicators that a block of type is more or less readable. The characters per line in body text is one of those metrics, it is also referred to as a type’s measure.
As web typography continues to advance I was curious to see how some of the top news websites follow the rule-of-thumb of 45 to 75 characters per line or the seemingly more screen centric 45 to 90 characters. Including NBC News, where I work and am on the team that is responsible for the article typesetting.
The thinking behind that range of characters is that if the line length is too short your eyes are quickly hitting the end of the line and must move immediately to the next. This results in a tiring reading experience. However, if the line length is too long, after reading the first line of text you now have traveled so far to the right that finding the start of the second line on the left can be tricky.
A Look at Twenty Publishers
I looked at the twenty publishers I personally visit on either a regular or semi-regular basis.
Averaged Character Counts
First line of the first five full width body paragraphs
Using the 45to75 Chrome extension I collected the character counts of the first line of the first five full width body text paragraphs. I skipped paragraphs that had inset callouts or media and one sentence long paragraphs.
Reading News on Screens
Rounding the averages, 20% of the sites fell within the range of 45 to 75 and 80% within the 45 to 90. Those that did not, averaged a 94.6 character count which is very close and could disappear with a larger sample size. It could also be attributed to decisions made by the design teams that accounted for more typography elements.
Frequency of Line Lengths
Character counts from twenty publishers found in their body text
Going in I made the guess that sites with a print origin were going to lean towards a shorter line length. Those two attributes turned out to have very little to no correlation.
I intentionally limited this analysis to desktop viewports. In the future I think looking at this collection of sites and their line length at different viewports could be very interesting.
Currently, I’m still a fan of finding a nice type size near 1em, which last time I checked most browsers set to 16px, then sizing slightly up or down depending on the typeface. Then measure the line length at mobile viewports and find my max-width towards the desktop spectrum.