[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-heightand leading - using
line-heightfor vertical alignment and - using the value of
line-heightto 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
