Selecting the correct line spacing
The legibility of text is not only determined by the font used; line spacing also plays an important role. As in the case of printed text, the skilled web designer will not leave a parameter as significant as this to whims of the automatic presets of the browser, but will select the required spacing manually. Below you will find a few tips on line spacing.
Line spacing is not a factor that is self-contained but which must always be considered in connection with font size and line length. It is essential to ensure that readers do not become disorientated and can readily find the following line. This means that there are two simple rules that should always be observed. Short lines can be placed closer together than longer lines. Where there are only a few lines, as in headings, the line spacing can be smaller than in texts that stretch over many lines.
Figure 1: Font size/Line spacing in the case of a headline: 33/34 points
Font size/Line spacing in the case of continuous text: 16/22 points
Headline and continuous text are both readily legible; as can be seen, the headline requires far less space between lines than the continuous text.
And, of course, you cannot simply increase line spacing at will because once a certain point is reached, the lines will tend to become disconnected and will no longer be naturally perceived as an integrated single text, meaning that it will not be possible to readily read the text.
Figure 2: This text is identical in terms of wording and font size with the text in Figure 1 but because there is too much space between lines, the text is disrupted and not readily legible.
Although designers will ultimately depend on their experience and feel for what is right to determine how lines are spaced, there are a few basic guidelines that you can follow that will help you space lines correctly. In general, lines extending to 50–80 characters are considered to be readily legible. In flexible web page situations online, it is thus advisable to ensure that your lines do not exceed more than 90 characters in length. You can find tips on how to control line length in web designs in our article Clearance and white space.
As a rule of thumb, the spacing between lines in more extensive continuous texts should be twice that of the height of the uppercase letters. But as the height of the uppercase letters is not identical with the font point size, this is something you will need first to guesstimate. You can do this with relative ease with the help of the uppercase ‘H’; simply imagine two more ‘H’s extending below the first. The baseline of the next line should then be at least at the bottom of the third letter. In headlines, the spacing can be much narrower; even descenders can be allowed to project into the following line; the only factors that really need to be considered are: does it look good and is it legible? It is always advisable to select the relative quantity ‘em’ to specify line spacing in CSS. This is a variable unit that is determined by font size. By selecting this, you will ensure that even if readers increase the text size in their browser, the correct relative line spacing will be retained. In conclusion, here are a few recommendations on line spacing relative to the type of font being used. Serifs usually help readers stay on a line while reading, so that serif fonts generally require slightly less spacing between lines in contrast with sans serif fonts.
Figure 3: Both of these texts can be easily read; the upper paragraph has been set in the serif font Palatino eText: at a font size of 16 points it only requires line spacing of 22 points.
The lower paragraph has been set in the sans serif font Sinova at a font size of 16 points: this requires more generous line spacing of 24 points.
The x-height, i.e. the relative size of letters with ascenders, such as ‘h’ and ‘T’, in comparison with those without, such as ‘a’ and, of course, ‘ex, is also a factor that should be taken into account for line spacing. Fonts with a small x-height tend to have more space above most letters and this is perceived as additional line spacing. This means you can reduce spacing between lines somewhat when using such fonts. At the same time, however, because a large x-height has a positive influence on legibility, fonts with larger x-heights tend to be used online and these require slightly more space between lines.
Figure 4: The upper paragraph has been set in Stempel Garamond; this has a normal x-height and thus requires line spacing of 22 points if a font size of 16 points is used to guarantee good legibility.
The legibility of the paragraph under this is also good, but the Bookmania font used here has a relatively large x-height and thus needs line spacing of 24 points when a font size of 16 points is used.
Figure 1: Font size/Line spacing in the case of a headline: 33/34 points
Font size/Line spacing in the case of continuous text: 16/22 points
Headline and continuous text are both readily legible; as can be seen, the headline requires far less space between lines than the continuous text.
And, of course, you cannot simply increase line spacing at will because once a certain point is reached, the lines will tend to become disconnected and will no longer be naturally perceived as an integrated single text, meaning that it will not be possible to readily read the text.
Figure 2: This text is identical in terms of wording and font size with the text in Figure 1 but because there is too much space between lines, the text is disrupted and not readily legible.
Although designers will ultimately depend on their experience and feel for what is right to determine how lines are spaced, there are a few basic guidelines that you can follow that will help you space lines correctly. In general, lines extending to 50–80 characters are considered to be readily legible. In flexible web page situations online, it is thus advisable to ensure that your lines do not exceed more than 90 characters in length. You can find tips on how to control line length in web designs in our article Clearance and white space.
As a rule of thumb, the spacing between lines in more extensive continuous texts should be twice that of the height of the uppercase letters. But as the height of the uppercase letters is not identical with the font point size, this is something you will need first to guesstimate. You can do this with relative ease with the help of the uppercase ‘H’; simply imagine two more ‘H’s extending below the first. The baseline of the next line should then be at least at the bottom of the third letter. In headlines, the spacing can be much narrower; even descenders can be allowed to project into the following line; the only factors that really need to be considered are: does it look good and is it legible? It is always advisable to select the relative quantity ‘em’ to specify line spacing in CSS. This is a variable unit that is determined by font size. By selecting this, you will ensure that even if readers increase the text size in their browser, the correct relative line spacing will be retained. In conclusion, here are a few recommendations on line spacing relative to the type of font being used. Serifs usually help readers stay on a line while reading, so that serif fonts generally require slightly less spacing between lines in contrast with sans serif fonts.
Figure 3: Both of these texts can be easily read; the upper paragraph has been set in the serif font Palatino eText: at a font size of 16 points it only requires line spacing of 22 points.
The lower paragraph has been set in the sans serif font Sinova at a font size of 16 points: this requires more generous line spacing of 24 points.
The x-height, i.e. the relative size of letters with ascenders, such as ‘h’ and ‘T’, in comparison with those without, such as ‘a’ and, of course, ‘ex, is also a factor that should be taken into account for line spacing. Fonts with a small x-height tend to have more space above most letters and this is perceived as additional line spacing. This means you can reduce spacing between lines somewhat when using such fonts. At the same time, however, because a large x-height has a positive influence on legibility, fonts with larger x-heights tend to be used online and these require slightly more space between lines.
Figure 4: The upper paragraph has been set in Stempel Garamond; this has a normal x-height and thus requires line spacing of 22 points if a font size of 16 points is used to guarantee good legibility.
The legibility of the paragraph under this is also good, but the Bookmania font used here has a relatively large x-height and thus needs line spacing of 24 points when a font size of 16 points is used.