AtoZ CSS Screencast: The CSS Line-Height Property

[special]This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.[/special]

Transcript

The CSS line-height property acts in a similar way to leading in print design.

It allows us to control the spacing between lines in paragraphs, headings and other text elements.

Line-height can also be used as a base to create consistent vertical rhythm and spacing throughout an entire project.

In this episode, we’ll look at

• the difference between line-height and leading
• using line-height for vertical alignment and
• using the value of line-height to set up site wide default spacing.

Line Height vs. Leading

Leading is a typesetting term which describes the distance between the baselines in the text. The term comes from the days of hand-typesetting when strips of lead were used to space out the block of type. When talking about leading, the space is always added below the line.

line-height is a CSS proptery that controls the height of a line where the spacing is equal above and below the text.

If I have a paragraph with 1em or 16px font-size, and a line-height of 24px, there will be 4px of space added above the text and 4px of space added below; the height of the line will be

4 + 16 + 4 = 24px. 

This is the major difference between line-height and leading: in CSS, the text is vertically centered within the line and in print, the space is added beneath the line.

Continue reading %AtoZ CSS Screencast: The CSS Line-Height Property%

by Guy Routledge via SitePoint