Line Height for Text Content

Line Height for Text Content

Spacing between lines is one thing that should never be overlooked, this factor alone could make or break the reading experience.

Setting the line height is easy.

The following is an example CSS commonly used to style text content.

1
2
3
4
5
6
P.sampletext
{
font-size:14px;
font-family:arial;
color:#0f0;
}

A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence.

As you can see the lines are pretty close to each other. In order to space the lines according to your liking, all you need to do is add the “line-height” attribute into the CSS.

1
2
3
4
5
6
7
P.sampletext
{
font-size:14px;
font-family:arial;
color:#0f0;
line-height:28px;
}

A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence. A quickbrownfox jumped over the fence.

So now you have the lines spaced out and it’s amazing just to see how the spacing between the lines could make or break the reading experience.

Ideal Usage

There’s no general rule or formula when it comes to choosing line spacing. It’s all a matter of finding out what spacing is optimal for your text usage. Sometimes you might want to narrow the gap just for artistic purpose.

Line Height for Text Content is AWESOME!

goldfries rated this product :

3 Comments

  1. in design terms we call it leading. (:

  2. Author

    @iz – not used to % 😛

    @kyll – thanks. 🙂

Comments are closed.