line-height: { length | number | percentage | normal | inherit } ;
The {line-height:} property sets the line height, providing an indirect means to specify the leading or half-leading.
The leading is the difference between the content {height:} and the (used) value of {line-height:}. Half the leading is known as the half-leading—an old typographic term.
Glyphs (the visual representations of a character) are centered vertically within an inline box. If the {line-height:} is larger than the content {height:}, half the difference—the half-leading—is added as space at the top; the same amount is also added at the bottom.
When it’s set on a block-level element, a table cell, a table caption, or an inline block that consists solely of inline boxes, this property specifies the minimal height of descendant line boxes.
When set on a non-replaced inline element, it specifies the {height:} used to calculate the height of the surrounding line box.
A specified length value will be the computed value for this property, and will be used in the calculation of the final height for the line box. Negative length values are illegal.
A number value is used as a multiplier in the calculation of the value used for this property, which equals the specified number multiplied by the element’s computed font size. Child elements will inherit the specified value, not the resulting used value for this property. Negative values are illegal.
A percentage is used as a multiplier in the same way as a number value—the computed value for the property equals the specified percentage value of the element’s computed font size. However, child elements will inherit the computed value for the property, not the specified percentage value. Again, negative values are illegal.
{normal;} is the normal line height, which depends on the user agent. In this case, it’s the specified value, {normal;}, rather than the resulting used value for the property, which will be inherited by child elements.
As you can see, the way the value is specified has great implications for the inheritance of line height by child elements. A unitless number is inherited as specified, so the declaration {line-height: 2;} will make child elements double-spaced even if their font sizes are different from the parent’s. For a length or percentage, however, the value is first computed as an absolute value, then this absolute value is inherited. This means that child elements will have the same absolute line height as their parents, regardless of their font sizes.
Internet Explorer for Windows versions up to and including 7 will use the wrong line height if the line box contains a replaced inline element, such as an image or a form control. The line height will shrink-wrap to the intrinsic height of the replaced element, and will also collapse with the half-leading of adjacent line boxes.
Firefox versions up to 1.0.0.8 do not handle number values correctly, but will use a computed value that’s too large. This is especially noticeable on Macintosh systems.
Internet Explorer for Windows versions up to and including 7 don’t support the value {inherit;}.
The property {line-height:} can accept unitless number values. You can also give {line-height:} united values, though generally you shouldn’t. But unitless numbers are just fine for this property.
So what’s the difference? When you define a united value, like 1em, you’re setting things up to pass along the computed result to any descendants. For example, suppose the following CSS is applied to a document containing the following markup fragment:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}
- I'm a list item with small text.
The <ul> element has its {line-height:} computed to be 15px because for {line-height:}, em-based values are calculated using the computed font-size of the element itself. I declared the font-size directly, so we know its computed size in pixels.
(Yes, yes, I know, pixel-sized text is evil and wrong, but it makes explaining how all this works a lot simpler.)
So that computed value of 15px is what’s passed on to the descendent elements. The <li> and <small> elements will inherit a {line-height:} value of 15px. End of story. They don’t change it based on their own font sizes; in fact, they don’t change it at all. They just take that 15px and use it, exactly the same as if I’d said:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}
Okay, now suppose I take the em off that {line-height:} value, so that the styles now read:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}
Now what’s passed on is that raw number, which is used by descendent elements as a scaling factor—a multiplier, if you will–and not the computed result.
Thus every element that inherits that value of 1 will take that value and multiply it with their computed font-sizes. The list item, with its declared font-size: 10px, will have a computed line-height of 10px. Then it will pass that 1 on to the <small> element, which will multiply it with its computed font-size. That’s 8 pixels; therefore, its {line-height:} will also be 8 pixels.
The end result is exactly the same as if I’d written:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}
That’s a pretty major difference. This is why it’s always strongly recommended that you use unitless numbers if you’re going to set a {line-height:} on something like the <html> or <body> elements, or indeed on any element that is going to have descendant elements.
Since the value of '{line-height:}' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the used value of '{line-height:}' is called the leading. Half the leading is called the half-leading.
User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12px' high and the '{line-height:}' value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
When the '{line-height:}' value is less than the content height, the final inline box height will be less than the font size and the rendered glyphs will "bleed" outside the box. If such a box touches the edge of a line box, the rendered glyphs will also "bleed" into the adjoining line box.
Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by '{line-height:}' is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes. User agents should render the boxes in document order. This will cause the borders on subsequent lines to paint over the borders and text of previous lines.
On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, '{line-height:}' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's {font:} and {line-height:} properties.
On an inline-level element, '{line-height:}' specifies the height that is used in the calculation of the line box height (except for inline replaced elements, where the height of the box is given by the '{height:}' property).
Values for the {line-height:} property have the following meanings:
- normal
- Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for '
normal' between 1.0 to 1.2. The computed value is 'normal'.
- <length>
- The specified length is used in the calculation of the line box height. Negative values are illegal.
- <number>
- The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
- <percentage>
- The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
The three rules in the example below have the same resultant {line-height:}:
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
When an element contains text that is rendered in more than one font, user agents may determine the '{line-height:}' value according to the largest font size.
Generally, when there is only one value of '{line-height:}' for all inline boxes in a paragraph (and no tall images), the above will ensure that baselines of successive lines are exactly '{line-height:}' apart. This is important when columns of text in different fonts have to be aligned, for example in a <table>.
By definition, it is the vertical distance between two corresponding positions in two adjacent lines of text. A suitable position to use for reference is the baseline, the imaginary line that uppercase letters and most lowercase letters "stand" upon.
In the old days, printed matter was typeset using movable types made from lead.
When they wanted to increase the spacing between lines of text, they inserted strips of lead. Therefore the distance was called leading, or half-leading because the strips added an equal amount of spacing in both directions. The term has survived into our computerised day and age.
Why Does {line-height:} Matter?
The leading greatly impacts the readability of a text. Too little leading makes the text too compact, while too much leading makes the readers lose their bearings between lines of text.
There is no optimal leading that is always "best". It depends on the width of the line: the measure. Most people know about the importance of proper line width, and it's often the deciding factor that causes inexperienced web designers to choose a fixed width before a fluid layout. Not everyone understands that the leading must be adjusted depending on the line width, though. The longer the text lines are, the more leading is needed so that the eye can find its way to the beginning of the next line.
{text-align:} also comes into play. {text-align:left;} text doesn't need any abnormal leading, but {text-align:justify;} text needs more spacing between the lines. It is especially important for some groups of dyslexics, since {text-align:justify;} text tends to create "white rivers" through paragraphs due to the variable {word-spacing:}. {text-align:right;} text may require even more leading, since we are not accustomed to reading that sort of text.
Lengths are, of course, specified as a number followed by a unit. The unit can be fixed (e.g. px (pixels) (w3c says px are relative!), mm (millimetres), pt (points) or relative em (em) or ex (ex). On the web, the best thing is usually relative units, since fixed line heights quickly degenerate into chaos if the reader changes the text size.
No matter which method you choose, negative values are not allowed, which is pretty obvious if you think about it.
For the example I’ve chosen 12px. To ensure readability the body text will almost certainly need some leading, that is to say spacing between the lines. A line-height of 1.5em would give 6px spacing between the lines of body copy. This will create a total line height of 18px, which becomes our basic unit. Here’s the CSS to get us to this point:
body {
font-size: 75%;
}
html>body {
font-size: 12px;
}
p {
line-height 1.5em;
}
There are many ways to size text in CSS and the above approach provides an accessible method of achieving the pixel-precision solid typography requires. By way of explanation, the first font-size reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px we require. This rule is primarily there for Internet Explorer 6 and below on Windows: the percentage value means that the text will scale predictably should a user bump the text size up or down. The second font-size sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels.
Headings
Subheadings in the example page are set to 14px. In order that the height of each line is 18px, the line-height should be set to 18 ÷ 14 = 1.286
Borders
One additional point where vertical rhythm is often lost is with the introduction of horizontal borders. These effectively act as shims pushing the subsequent text downwards, so a two pixel horizontal border will throw out the vertical rhythm by two pixels. A way around this is to specify horizontal lines using background images or, as in our example, specify the width of the border in ems and adjust the padding to take up the slack.
The design of the footnote in our example requires a 1px horizontal border. The footnote contains 12px text, so 1px in ems is 1 ÷ 12 = 0.0833. I have added a margin of 1½ lines above the border (1.5 × 18 ÷ 12 = 2.5ems), so to maintain the rhythm the border + padding must equal a ½ (9px). We know the border is set to 1px, so the padding must be set to 8px. To specify this in ems we use the familiar calculation: 8 ÷ 12 = 0.667.
The reason is that images – the <img> element type – are inline elements. They are thus affected by the vertical-align property, whose initial value is baseline. In other words, an image is positioned so that its bottom edge rests on the baseline. But the baseline is some distance above the bottom edge of the cell, to make room for descenders. What we see is the distance between the bottom edge of the text line and its baseline, plus half the surplus of the line height. If the image is lower than the font size, there will even be a gap above the image, which comes from the other half of the line height surplus. FROM LINEHEIGHT ON 24WAYS BY CLAGNUT BUT ABOUT VERTICAL ALIGNM
{{line-height:} Line-Height Property - CSS Property Reference :: webDev
