Mike – you’re right about being able to simplify the line-height specifications, but it doesn’t require setting unitless line-heights. In the example I use, I’ve set the font-size to be 12px on the body and calculated line-heights for all the subsequent elements. As I required one line height – 18px – for all elements I can remove the multiple statements and simply set line-height:1.5em on the body. The calculated line-height of 18px is inherited by all elements on the page. I’ve modifed the example to show this (checked in Firefox, Safari and IE6):
However the maths would still need to be performed to calculate the correct margins, so while the extra line-height specifications are not strictly necessary (at least while the same line height for all text is required) you unfortunately don’t save much on the calculations.
Richard Rutter
Mike – you’re right about being able to simplify the line-height specifications, but it doesn’t require setting unitless line-heights. In the example I use, I’ve set the font-size to be 12px on the body and calculated line-heights for all the subsequent elements. As I required one line height – 18px – for all elements I can remove the multiple statements and simply set line-height:1.5em on the body. The calculated line-height of 18px is inherited by all elements on the page. I’ve modifed the example to show this (checked in Firefox, Safari and IE6):
http://webtypography.net/24ways2006/24ways-v2.html
However the maths would still need to be performed to calculate the correct margins, so while the extra line-height specifications are not strictly necessary (at least while the same line height for all text is required) you unfortunately don’t save much on the calculations.