In the early 1900s, Tinker A. Miles, a psychology professor at the University of Minnesota, conducted a study about the way a reader judges how much of a page is filled by content. He showed the test subjects printed cards that had an area of black printed in the middle (see below).
The amount of black was a 50-50 ratio to the whitespace. However, the subjects perceived the cards to be 75% covered by the black. So the printed area was seen as larger than it actually was.
Knowing that your website visitors can perceive a large amount of text as being insurmountable, the right line spacing can make that text seem more manageable.
Finding the right line spacing (or leading) for your website’s body copy can depend on a number of factors, including the height of the font and the length of the line. For readability purposes, a good rule of thumb is: the longer the line, the more leading you’ll need.
An interesting study by Smashing Magazine found that most websites follow these specs for the right amount of line spacing:
- Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
Note that 1.5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb. - Line length (in pixels) ÷ line height (in pixels) = 27.8
The average line length is 538.64 pixels (excluding margins and padding) which is pretty large, considering that many websites still use 12 to 13 pixels for their body copy font size. - Space between paragraphs (in pixels) ÷ line height (in pixels) = 0.754
We were surprised by this result. It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of the paragraph leading. The reason may be that leading usually includes the space taken up by descenders, and because most characters do not have descenders, additional white space is created under the line.
