Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

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.

line-height:120%

I have the default leading which makes me look very cramped and users must struggle there little hearts out to read hundreds of lines. I am sorry to all of my readers that I never learned about line height.

line-height:140%

I have a decent amount of leading, but I would increase the leading if I had a darker background. However, with a white background anywhere from 125% to 150% should help with readability.

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.

Example

style='line-height:120%;'I am some text that has a very short width and if written long enough I will drive you crazy especially when my line height is also short..

Example

style='line-height:160%;' I understand that I am very short, which means I want to have more line height to help the user to read me.

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.

Example

style='line-height:120%;' I am text on a dark background, which means I am more difficult to read than dark text on a light background. Increasing my line height would help, but I am way to lazy for that.

Example

style='line-height:150%;' I am text on a dark background because I wanted the elegance of black. However, I understand that it is more difficult for my users to read, so I increased my line height to accommodate for the impairment

As I've said, I'm not a designer, but just a programmer. You should consider reading the following book to understand graphic design from a designers perspective.

Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    Cliff Strange Dec. 4, 2013, 9:25 p.m.

    I agree with what you say regarding reversed type (white type on a black background) needing more leading. In fact, I think you have to have a seriously good reason for reversing type.

  • User

    Benjo Ben July 11, 2013, 2:12 p.m.

    Great, but there is a typo in the middle of the text: "However, don't go overboard and use line heights of like 200% because that is more annoying that useful." -> "However, don't go overboard and use line heights of like 200% because that is more annoying than useful." The last but one word is changed from 'that' for 'than'.



Advertisement