2.2.1 Choose a basic leading that suits the typeface, text and measure
“Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”
Leading (pronounced “ledding”) is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in CSS through the line-height
property. For example 12 point text can be given 3 points of lead in the following manner:
p {
font-size: 12pt;
line-height: 15pt;
}
That example will give you the same line-height throughout all your paragraphs, however it does introduce the danger that, when the browser text size is increased by your reader (to 18 pt for example) the line-height may remain at 15 pt. The result being that, instead of the lines being spaced apart, they would actually overlap.
A safer approach is to use a unitless value. The preceding example could also be coded as:
p {
font-size: 12pt;
line-height: 1.25;
}
In this example the value of line-height
is a multiplier: 1.25 x 12 = 15 pt. This is a far more reliable method as the line-height (the distance between baselines) will always be proportional to the text size. Line height can be incorporated into the font
property using a shorthand familiar to typographers:
p {
font: 12pt/1.25 "Minion Pro", "Minion Web", serif;
}
It should be noted that some browsers add a little leading by default: Safari and Internet Explorers for example; whereas others, such as Camino and Firefox, do not. Text on the web almost always benefits from an increase in line height, and figures upwards of 1.3 are common (this page has a line-height
of 1.5 for example).
Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text. To illustrate this the following example has a line-height
of 3 and shows the text set midway between two borders:
Negative leading, in other words a line-height
value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:
.example {
font-size: 1.5em;
line-height: 0.85;
text-indent: -0.5em;
}
of negative leading