How to set leading with ems in CSS
Recently, a faithful Typetester fan wrote:
I choose Verdana size 1.2 em / leading 1.6 em (that should be size 12px / line-hight or line spacing 16 px as you described in Typetester’s base font size and made a screenshot from Firefox 1.5 / Win.
I compared the screenshot with its font size and line spacing in Photoshop with Verdana size 12 px / line spacing 16px. The result is that leading 1.6 em is bigger than line spacing 16 px in Photoshop, it is around 19 px. Where is the mistake?
Line-spacing is the distance between base lines of the two neighbor text rows
According to W3C:
Since the height of an inline box may be different from the font size of text in the box (e.g., ‘line-height’ > 1em), there may be space above and below rendered glyphs. The difference between the font size and the computed value of ‘line-height’ is called the leading. Half the leading is called the half-leading.
According to Robert Bringhurst’s book The Elements of Typographic Style:
Vertical space is metered in a different way. … This unit is the leading, which is the distance from one base line to the next.
The word leading is after thin strips of lead, inserted between lines of type in letterpress printing.
Line-height is a CSS property which is equivalent to line-spacing. It can be computed, inherited or specified.
How it works in CSS
If set with relative unit (like em or percentage), line-height is always computed from the element’s font-size, whether the sizing is explicitly specified for the given element or simply inherited by a cascade. The 12px font size from our example is multiplied by 1.6, which really is 19px (19.2 to be precise).
If one’s attempt is to set the 16px leading, then she should divide the 16px from Photoshop with the 12px font size. That simple calculation would result in 1.333em (or 133.3%).