web typography study guide

Line-height

Line-height is the vertical distance between lines of text. On the web, it is an equal amount of space above and below text on a line [fig.1]. Leading in desktop publishing, however, is the amount of space below a line of text.

In CSS, the line-height property can take numeric or percentage values. If no line-height value is specified or inherited, the line-height by default is normal. It usually is about 20% larger than the font size. For example, if the font size is 14px, then the line-height is about 16.8px. With many font faces this Line-height is a little too small. The ideal Line-height varies depending on other typographic factors such as the choice of font face and line length [fig.2].

tip  Follow these general rules to set Line-height:

  • The longer the line length, the taller the Line-height should be.*
  • The shorter the line length, the shorter the Line-height should be.
  • Use a taller line-height with continuous copy.
  • Use taller line-heights with large x-height fonts.
  • The ascenders and descenders of the lines of text should not touch.
  • Place the lines close enough together that the reader requires no effort to find the next line, then balance the height based on the line length.

With elastic layout, line-height along with font-size is better calculated with em. Because em is a relative measurement unit, it is based on the value of the parent element. 1.5em is the most common line-height; it states that this paragraph has a line-height of 150% of the current font-size (if the font-size is 12px, then the line-height is 1.5 × 12 = 18px).

* Balanced line-height can be especially tricky to keep consistent in responsive layouts since line lengths will vary based on the width of the device. To solve this issue, the idea of fluid line-height — Molten Leading — was proposed. It allows line-height to change proportionally based on the screen width.