Leading, which many call line height, is the space between lines of text. Web designers will often call it line height as line-height is the CSS property to handle leading. Leading is probably one of the most important Graphic Design principles to improve the readability of your content. No reader enjoys content that is sandwiched together. Creating great content is awesome, but quite often, people don’t want to read everything that you write. We use our eyes as an advanced technology to scan for the important information. Humans love white space, which is essentially what leading provides between lines of text.
While there is well more than 3 rules about leading, these are the 3 most important rules that I can give to you to improve your website with line height in mind.
Default Leading is Not Enough
Browsers typically have a default leading of “normal”, which is roughly 120%. I generally use leading in terms of percent because of their dynamic nature as opposed to the static nature of pixels.
While there is only a 20% difference, can’t you see how the lower example is more readable. However, don’t go overboard and use line heights of like 200% because that is more annoying than useful. It will actually become counterproductive because the eye won’t be able to separate paragraphs from lines.
Shorts Lines More Line Height
Short lines are already very tight and difficult to read because the eye has to shift from line to line more often than a longer line. Creating more separation between the lines allows the eye to more easily follow the lines.
Isn’t it crazy how much difference the line height makes on short lines? Again, don’t go overboard with it, but it is super useful for sidebar content or shorter lines of text.
Darker Background More Leading
It is often said that white text on a black background provides less contrast than black text on a white background. This means that users struggle more to read the white text on a black background. If you must use a darker background, always consider using more leading between your lines of text to help ease the already struggling readability of your text.