Using the Line-Height Property

The line height has a large effect on the character and the readability of text. Specifying a line height is often not just a matter of plugging in a standard value. Many factors go into deciding how large or small a line height should be for a given situation. These factors include the font's size, its appearance (e.g., fancy versus plain), its x-height, the lengths of its ascenders and descenders, and the length of the line of text.

For example, large line heights are sometimes used in advertisements, where a profoundly modern look is called for, even if the result reduces readability. In comparison, titles, which are typically a larger font and usually short in length, often look better with a smaller line height. A font with relatively long ascenders and a small x-height introduces a lot of visual space between lines, so you can use a smaller line height. In contrast, relatively short ascenders and large x-height can seem to reduce the visual space between lines. Thus, you can use a larger line height.

On the other hand, small line heights may force lines too close together, thereby interfering with readability. Longer lines often need extra space between them to guide the eyes on their way back from the end of one line to the start of the next. Shorter lines can often tolerate a smaller line height. An effect similar to double spacing can be achieved by setting the line height to 2.0. This is too much for most cases, but it is sometimes required.

Because this property specifies the minimum distance between the baselines of the lines, an inline element with a larger line height or an inline image may cause lines to be farther apart than expected.