Use line-height!

Adjusting the spacing between lines of text makes a huge difference to the look of your text, and it is almost always required to enhance legibility.

The line-height property is easy to understand, simple to implement, but most often forgotten about. With careful color, size, and font-family properties set, and the text placed within a beautifully executed section of the page, it is easy to consider the job done. The revelation that something as simple as adjusting line-height can then bring to what is considered finished is something one never forgets, and once you see this for yourself, you will use it in every subsequent design.

Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use some space for clarity, but it is the paragraphs where the increased legibility will be most noticeable. The rule is simple:

line-height:150%;

In this example, the spacing between the lines of text will be the given percentage of the current font-size. So, a line-height of 100% will make no difference, whereas a line-height of 150% will create a space half the size of the font. A line-height of 200% will create a space equal to the size of the font, and so on. Here, the line-height declaration is added to the existing body selector:

/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

In Figure below, this line-height of 200% can be seen on the right, compared with the default on the left.

Default line-height on the left and a line-height of 200% on the right.

The browser window on the right clearly shows that a line-height of 200% creates spacing equal in height to the size of the text characters. This is great for the example, but in the real world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values

As well as the very flexible method of setting line-height using percentage, some other values can be used.

Normal

Sets what the experts call a "reasonable distance between lines." In actuality, this setting is exactly the same as specifying no line-height at all, and it is only useful if you wish to override inherited line-height for a particular element.

line-height:normal;

Number

Sets a number that will be multiplied with the current font-size to set the distance between the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in a space of 24 pixels between lines of text.

line-height:2;

Length

Sets a fixed distance between the lines, which is great for precision, but it is important to remember that when text is resized, the line spaces will not increase or decrease at the same ratio as the text.

line-height:8px;

To ensure appropriate scaling when text is resized, use a flexible length measurement such as ems or percentage.

[Back] [Contents] [Next]