Aug 17, 2016
A small trick for making your web pages more legible
Recently, I was reading an article on CNBC.com and noticed that while the body text was easy to read, the headings weren’t so easy to read.
While there’s plenty of line spacing between the lines of the paragraph, the lines of the heading are too close together. The second line of the heading is nearly bumping into the first line.
Because of the line spacing, you can’t skim the heading or even read it quickly. You have to slow down to differentiate each word.
The code for the paragraphs lists the font size at 18px and the line spacing as 30px. The line spacing is about 166% of the font size.
The code for the heading lists the font size at 30px, but the line spacing is only 26px. In other words, the line spacing is about 86% of the font size.
Generally, the ideal line spacing on the web is between 120% to 150% of the font size. The percentage varies depending upon your font. A smaller font requires less line spacing, while a larger font may require more line spacing to remain legible.
What is line spacing?
Line spacing refers to the amount of space between lines of text both above and below. In graphic design, line spacing is known as leading, and on the web, the CSS property line-height determines line spacing.
If you don’t specify line-height in your stylesheet, web browsers specify a default line spacing by adding the following for you:
This normal value may be equal to 100% to 120% of the font size, which may result in lines of text that are too closely spaced.
To ensure that your text is legible, it’s a good idea to specify the line-height property in your stylesheet rather than relying on the browser to specify the default. If you are working with a web designer or developer, then ask him or her specify this property.
In the following screenshot, I increased changed the line-height from 26px to 1.5. The resulting heading is much easier to read.
How to specify line height
In CSS, you can specify line height in one of four ways:
- Using a keyword: normal, which is the default value; initial, which sets the default value (not supported by IE, by the way); or inherit, which applies the value specified for the parent element
- As a percentage (example: line-height: 120%)
- With a unit of measure, such as em, px, pt, and so on (example: line-height: 25px)
- As number (example: line-height: 1.2)
When you specify a number, the browser calculates the line height by multiplying the number by the font size. For instance, if your font size is 10px and your line height is 2, then the computed line height is 20px.
I specify line height using either numbers or percentages. I generally avoid using units of measure—just a personal preference—though it’s a valid method to use as well.
Too much line height
In the earlier CNBC.com example, you saw what happens when you have too little line height: lines of text are so close together that it impacts legibility. What happens when you have too much line height?
One of the four basic principles of design is proximity: Items close to one another are assumed to be related to one another. It’s a way in which to organize information visually by grouping related content.
In the earlier example, we can assume that the heading is related to the text below it because of their proximity to one another.
Items further apart are considered separate entities. With enough space between the heading and the text, we would no longer think of them as related. Visually, they would appear to us as two separate units.
If you add too much line spacing to the paragraph, for example, then you see individual lines rather than a single paragraph. In the following example, I changed the line-height from 30px to 2.75.
With the lines so far apart, it appears that each line is its own paragraph. You want to find a line height that’s comfortable for reading, but that doesn’t affect proximity.
Also, you may want to avoid making your web pages unnecessarily long due the additional line spacing.
It’s easy to overlook the line-height property until you notice how difficult it is to read your web content. Because there is no ideal line height, you may need to test several values to find the right fit for your font size.
Begin with line-height: 1.2. If the lines still appear too close, then increase your line height by +0.05 or +0.1 until you’re comfortable reading each line.