{"id":201,"date":"2007-01-05T09:44:54","date_gmt":"2007-01-05T07:44:54","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2007\/01\/05\/how-to-set-leading-with-ems-in-css\/"},"modified":"2010-04-12T16:59:25","modified_gmt":"2010-04-12T15:59:25","slug":"how-to-set-leading-with-ems-in-css","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2007\/01\/05\/how-to-set-leading-with-ems-in-css\/","title":{"rendered":"How to set leading with ems in CSS"},"content":{"rendered":"

\"TYPE<\/p>\n

Recently, a faithful Typetester<\/a> fan wrote:<\/p>\n

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\u2019s base font size<\/a> and made a screenshot from Firefox 1.5 \/ Win.<\/p>\n

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?<\/p><\/blockquote>\n

Terminology confusion?<\/h2>\n

Line-spacing<\/h3>\n

Line-spacing is the distance between base lines of the two neighbor text rows<\/p>\n

Leading<\/h3>\n

According to W3C<\/a>:<\/cite><\/p>\n

\n

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.<\/p>\n<\/blockquote>\n

According to Robert Bringhurst\u2019s book The Elements of Typographic Style:<\/cite><\/p>\n

\n

Vertical space is metered in a different way. … This unit is the leading, which is the distance from one base line to the next.<\/p>\n<\/blockquote>\n

The word leading<\/em> is after thin strips of lead, inserted between lines of type in letterpress printing.<\/p>\n

Line-height<\/h3>\n

Line-height is a CSS property which is equivalent to line-spacing. It can be computed, inherited or specified.<\/p>\n

How it works in CSS<\/h2>\n

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<\/em> 19px (19.2 to be precise).<\/p>\n

If one\u2019s 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%).<\/p>\n

Related reading<\/h2>\n