CSS Line-Height Units - Mystery Revealed!

One of the more mysterious issues when using style sheets in web page design occurs when you apply "line-height" values to text. We have seen allot of designers try and use all kinds of units for line-height, each with mixed and often mysterious results. Maybe this will help explain the problem...first look at the effects of line-height values in the text below:

Test #1 (line-height:2,font-size:100%) text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Test #2 (line-height:2,font-size:120%) text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Test #3 (font-size:120%, but has parent and inherits line-height:2,font-size:100%) text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Something very interesting is going on (in Internet Explorer and Firefox). Notice that in the first two cases, the line height numerical value stayed the same, but as the font-size value increased, line-height spacing in the text increased relative to the font-size of the text! The browser, in the case of numerical or decimal line-height values, calculates the line-height using the font size. Actually, that is the way its supposed to work. Now take the third case. In that case, we are testing inheritance of the line-height value. Notice though, what you would expect to happen, does not happen. In the Test #3 case, we have a div wrapped around an inner div with text. The outer div uses a 100% font-size, but has line-height of 2, or twice a big. If we had put text in there, it would be the size of #1, but height calculated based on #2, or line-height:2. In the inner div we override the parents font-size, setting it to 120%, but leave line-height out. The child div inherits the parent line-height, as expected, but then overrides the parent with its font-size. Combining the two, the Test #3 inner text should now be the SAME line-height and font-size as Test #2. But it is not! It appears the the font-size is right, but the line-height is smaller than expected. Its actually the height if you had applied line-height:2 to font-size:100%, not 120%. Why? It appears the line-height is inherited, but calculated based on the parents calculated value, and is NOT recalculated based on changes in the child's font-size! This is why its important to understand line-height, and learn to use it correctly.

In summary, line-height is not an absolute value, but is calculated based on a parent, then inherited by children, regradless of their font-size. We recommend you always use a numerical value, like "line-height:1.2;". This allows your text to scale in size and line-height as the user scales the text in their browser. But be careful! Remember that line-height values in text is inherited but not recalculated. In other words, numerical values for line-height are not only calculated based on the parent, but are then inherited and applied to whatever font-size a child has given itself. For this reason, if you shift font-size, you should always apply a line-height, too, or leave both off, in our opinion, when styling text.

Looking for great standards-based Website Products for your website? Get GiantIsland Web Products!