Setting line height

Graphic designers will be familiar with leading, and the CSS line-height property enables
you to set this. Generally speaking, it’s a good idea to be fairly generous with leading for
web pages, because text is harder to read onscreen than in print; by placing larger gaps
between each line, the eye can more easily scan through large blocks of text.
When setting line-height, you have various options, and can use a number, length, or
percentage:
h1 {
font-size: 14px;
line-height: 20px;
}
h2 {
font-size: 1.3em;
line-height: 1.6em;
}p {
font-size: 1.1em;
line-height: 1.5;
}
The difference between the font-size and line-height measurements is the leading
value. Half the value is applied above the text and half below. Should you use a number
alone, rather than a length or percentage, that value is multiplied by the font-size setting
to define the line height. For example, if font-size is set to 10px and line-height is set
to 1.5, the line-height value becomes 15px.
Many web designers who have no graphic design experience ignore the line-height
property, but, as mentioned earlier, it’s essential for improving the legibility of a web page.
In the following screenshots, the left images shows the default spacing and the right one
shows increased line height, resulting in increased legibility.