style guide
Line Height
The line-height property is a tricky property to understand, but it’s effects on your text can be described fairy basically. It is used to increase or decrease the vertical space between lines of text, but it is useful to look in more detail at how it does this.
Essentially, the line-height property adds leading to the content area of the font. Leading is the difference between the value of line-height and the size of the font, the space above and below each line of text. The value for leading is split into two and half is put at the bottom of the text and half at the top.
The default value of line-height is normal, and this is computed by user agents to be about 1.2 times the size of the font, so as to produce a nice amount of leading for readable text.
Line height can also be set using px, or a percentage, but there are complications which come about concerning inheritance when using these value types.
line-height values are inherited from the parent element as computed by the parent element and not as computed by the child element. Consider the following:
div {font-size:10px;}
p {line-height:1em;}
span {font-size:22px;}
<div><p><span>This text is 30 pixels in size, but the line height of 1em has been computed and inherited from the parent element, which had a font size of 10 pixels. Therefore the line height for this text is still only 10 pixels and the lines are overlapping</span></p></div>
This text is 30 pixels in size, but the line height of 1em has been computed and inherited from the parent element, which had a font size of 10 pixels. Therefore the line height for this text is still only 10 pixels and the lines are overlapping
Because of this effect it is better to set line height values with a number which scales from the current font size. This is easily done simply by specifying a number.
p {line-height:1.5;}
This will cause the line height to be set at exactly one and a half times the current font size, even if the line height has been inherited from it’s parent.
div {font-size:10px;}
p {line-height:1.5;}
span {font-size:22px;}
<div><p><span>This text is 30 pixels in size, and the line height of 1.5 is inherited from the parent element, which had a font size of 10 pixels. In this case the line-height scales to the current font size of 30 pixels, and we keep the factor of 1.5. Perfect.</span></p></div>
This text is 30 pixels in size, and the line height of 1.5 is inherited from the parent element, which had a font size of 10 pixels. In this case the line-height scales to the current font size of 30 pixels, and we keep the factor of 1.5. Perfect.
| line-height | |
| Values: | <length> | <percentage> | <number> | normal | inherit |
| Initial Value: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | refer to the font size of the element itself |
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Django in Production
- Puttin Django into production. Check out the wiki.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
