line-height

The line-height property sets leading (the distance between the baselines of two lines). This is the amount of space for each line; it includes the text and a bit of extra space. The bigger the font size; the more extra space that you get. Internet Explorer adds the space before lines, not after lines.

You can specify leading in millimetres, centimetres, inches, points, picas, pixels, the height of the font (em) or the height of the letter x (ex). For example:

{line-height: 24pt;}

In this example, you have 24 points of space between the baselines of adjacent lines of text. If you font size is 12pt, your document is double-spaced. If you set an absolute point size, the space does not change even if you change the font size. If you change the font to 18pt, the line height remains 24 pt. This might make your page look a bit odd.

You can also make text closer together:

p.tight {font-size: 12pt; line-height: 10pt;}

If the line-height is too small for the font, the lines of text overlap.

You can also specify a percentage value. The following example also double spaces lines:

{line-height: 200%;}

The browser works out the line height from the font you used when you specified the line height. If you change the font in the middle of a paragraph, it will not recalculate the height for the different font.

If you specify the line height as a number, the browser multiplies the font size by the number to work out the height. You can’t have negative values but you can have values like 2.5. For example:

{line-height: 2.0;}

In this example, the line height is always twice the height of the font. If you change the font in a paragraph, the browser recalculates the height to match.

This property behaves inconsistently on text that uses different point sizes on the same line.

Some things to think about:

The whole point of setting the line height is to make the page easy to read and more attractive to look at. Make sure you choose a height that lets the eye progress across the page and from line to line. If the line height is to big, you tend to move the eye down the page and scan instead of reading
Dark backgrounds tend to make lines look closer together and light backgrounds make then look further apart so set the line height accordingly