Line Spacing with CSS

Line spacing is also known as leading, which, as previously illustrated in Figure 13.1 in Chapter 13, is the spacing between the descender on one line and the ascender on the next line down. The property used to specify it is the line-height.

1. line-height

The line-height property is inherited and used to specify the spacing between one line of text and the next. The values it supports are listed in Table 14.4 and Figures 14.15 and 14.16 show how the line-height property is used and the result.

Notice in the example the unexpected result produced by the em unit with a larger font size, even though the text in smaller font size looks all right. This problem can also happen with other measurement units like px.

2. Line Height in Design

Having lines too closely or too widely spaced can cause legibility problems. If lines are too closely spaced, the eyes can continually stray into the line below instead of moving along the current one; if they are too widely space, the eyes are forced to make extreme unnatural jumps from one line to the next. Spacing of between 1.5 and 2 is recommended for Web accessibility, especially for users with cognitive disabilities who can have problems tracking lines of text that are too close. However, other text properties, such as font size and font weight, might warrant using spacing outside of this recommendation. One rule of thumb is to try to make line-spacing bigger than the spacing between words. Additionally, where the <sub> or <sup> elements are used, in order to ensure leading is not disrupted, line-height may also be set for the elements.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *