Line Height

Updated: Oct 20, 2009

Glyphs

A glyph is a graphical unit of a typeface. For a more detailed description of glyphs see http://en.wikipedia.org/wiki/Glyph

Content Box Height

The height of a content box is between approximately 110% and 150% of the font size (depending on the font size and typeface). For example, here are the content box heights for some typefaces (normal font) in Windows XP.

Typeface at 25px, normal	Content Box Height	% over font size
Times New Roman	29px	116%
Arial	28px	112%
Verdana	31px	124%
Trebuchet	29px	116%
Impact	32px	128%
Courier New	29px	116%
Comic Sans MS	34px	136%
Tahoma	30px	120%

The height of a content box is constant for a particular font size and font, it does not depend on the actual size of the glyph. Therefore, the content box of a period (full-stop) will be the same size as the content box of the letter 'A'. The height of a content box of a particular font and font size cannot be changed using CSS.

Firefox 3, Internet Explorer 6, Internet Explorer 7, Opera 9.6, Opera 10, Safari 4 and Chrome 3 allocate the same content box height for a particular font and font size. However, Safari 3.2.2's content box height is sometimes more than, sometimes less than, and sometimes equal to that of the other browsers (for a particular font and font-size).

In most typefaces, the capital A with a circumflex reaches the highest possible point and touches the top of the content box and the @ glyph reaches the lowest possible point and touches the bottom of the content box.

Font Smoothing and Content Box Height

In Firefox 3, the content box height is unaffected by font smoothing — whether standard font smoothing, ClearType smoothing or no font smoothing.
In Internet Explorer 6, ClearType and Standard smoothed text have the same content box height (for a given typeface and font size). However, with smoothing disabled, the content box height is sometimes 1or 2 pixels more than that of smoothed text of the same typeface and font size. The extra pixels go on to the top of the line.
Internet Explorer 7 and Internet Explorer 8 always use ClearType and their content box height is the same as IE6 with smoothed text (for a given typeface and font size).

Opera 9.6's content box height is constant irrespective of font smoothing and is the same as IE7 (for a given typeface and font size).
Safari 3.2.2 always uses ClearType smoothing.

Safari 3.2.2 Content Box rendering bug

In Safari 3.2.2, the content boxes of some fonts are rendered with the wrong height. This causes the upper parts of capital accented characters (and other special characters) to spill out of the content box. Here is an example:
<p style="font-family:'Times New Roman';font-size:16px;background-color: green">16<spanclass="pink">&Eacute;&Acirc;&Ccedil;</span></p>
Note: This bug is NOT present in Safari 4.

The Line Box

A line box is the box created by the p element and the span element. The height of the line box is called the line height. In Firefox 3, Opera 9.6, Safari 3.2.2 and Internet Explorer 8 the default height of a single-line line box is equal to the height of the tallest content box in the line (provided there are no replaced elements). In these browsers, the line height of a p element is determined by the inherited font size and font face and a line will always have this height even if the line only contains a 1-pixel high gif (say) and no glyphs.

In Internet Explorer 6 and 7, line boxes don't have a default line height. In IE6 and IE7, the line box takes on the height of the tallest content box in the line (provided there are no replaced elements). In these browsers, if a p element only contains a one pixel-high gif (say), the line height of the p element will be one pixel.

The length of a line box varies — depending on the width of the containing parent element or the browser window width. The line box of a p element can be made visible by adding a background color to it. However, in a span element, the background color only fills the content box even though the span's line box height may be larger. In all browsers, wrapped line boxes (paragraphs or spans that contain more than one line) have a height that is equal to the sum of the heights of the constituent lines.

Here is an example of a line box.

Default line height bug in Firefox 3, Firefox 3.5, Safari 3.2, Safari 4 and Chrome 3

Firefox 3, Firefox 3.5, Safari 3.2.2, Safari 4 and Chrome 3 have a bug that causes them to allocate one or two extra pixels of default line height for the typefaces Times New Roman, Arial, and Trebuchet.

When the font is Times New Roman, these browsers add one extra pixel of default line height for font sizes 12px to 35px and two extra pixels for font sizes 36px to 50px.

When the font is Arial, they add one extra pixel of default line height for font sizes 16px to 45px and two extra pixels of line height for font sizes 46px to 50px.
When the font is Trebuchet, they add one extra pixel of default line height for font sizes 12px to 35px and two extra pixels for font sizes 36px to 50px.

Therefore, to have a consistent line height across Firefox 3, Firefox3.5, Safari 4, Chrome 3, Internet Explorer 6 and 7 and Opera 10, one has to decrease the line height by one or two pixels depending on the font and font size. However, Safari 3.2.2's rendering of lines containing text cannot be made completely identical with other browsers because of its content box bug (see above).

Example: For a paragraph containing text of font Arial at font size18px and default line height, one has to use the CSS declaration line-height:21px. This is one pixel less than the 22 pixels allocated by Firefox.
Note that the "extra" pixel of line height does not appear in content boxes. Below is an example showing this:

<div style="font-family:Arial"><p style="font-size:18px;background-color: green">The <span style="background-color:fuchsia">Five Boxing Wizards</span>Jump Quickly 0123</p></div>

We can see that the one "extra" pixel of line height goes on to the top of the line box in Firefox 3. However, this is not consistent – Firefox 3 sometimes puts the one "extra" pixel of line height at the bottom. Safari 3.2.2 always puts the one extra pixel of line height at the bottom of the line box.When there are two "extra" pixels, both Firefox 3 and Safari 3.2.2 put one pixel at the top and the other at the bottom of the line box.

In Firefox 3, the one extra pixel of line height can be made to switch from the top to the bottom is by putting one of the heading elements — <h1> to <h6> within the div that contains the paragraph. In the example above, the <h6> element will cause the extra pixel to go to the bottom of the line box.

Line Height and Font Style

In Firefox 3, Internet Explorer 6 and 7 and Opera 9.6, italic and bold face sometimes have content box heights that are one pixel more than that of the normal font. In Firefox 3, underlined or overlined text sometimes have a content box height one pixel less than that of normal text.

In Safari 3.2.2, normal, italic, bold, underlined and overlined text all have the same line height (for a particular typeface and font size).

Line Height Declarations

Line height can be specified on any block element or inline element using the CSS declaration line-height.
For example: p { line-height: 20px; } Line height can be specified using px, pt, pc, in, mm, percentages,em's, ex's and raw numbers. Negative values are not permitted.

Line Height Declarations on <p> elements

The line height of a <p> element can either be increased or decreased using the CSS line-height property. The line height of a line in a p element is normally determined by the largest font that it contains, by any span elements it contains or by any replaced elements — whichever takes the greatest amount of vertical space. The CSS line-height property allows one to override the line height that was allocated by the browser. When the line height is decreased or increased from the normal value, the browser adds or removes an equal number of pixels from the top and the bottom of the line box. When an odd number of pixels have to be added or removed, the extra pixel is added or removed from the top or the bottom, depending on the browser. The line-height property affects all the lines of the p element. Note that the dimensions of content boxes and replaced elements are not altered by the line-height declaration.

When the line height of a pelement is reduced, those parts of the glyphs in the line that don't fit within the reduced line height spill out of the top and bottom of the line box. This can be seen in the example below:
<p style="line-height: 8px; background-color:green">The<span style="background-color:fuchsia">Five</span></p>

The background color of the <p> element stays within the specified line-height. However, if the line contains a span with background color, the color extends outside the line box and fills the content box. The content box height cannot be reduced, it is determined by the font and font size. This can be seen in the example above.
When the contents of an element span multiple lines, the bottom half leading of one line does not merge with the top half leading of the line below it. Therefore, if a <p> element has a line height of 30px and has two lines containing text, the total height of the <p> will be 60px.

When there are colored span boxes in a paragraph of multiple lines of reduced line height, the color of the span will hide the descenders of the glyphs in the line above. The ascenders of the line below will overlap the descenders of the glyphs and the color of the span above.

Safari 3.2.2, Safari 4 and Chrome 3 always puts the baseline of the text contained in a <p> in the line box. Therefore, if the declared line height were so small that the baseline of the text in an element would be outside the line box, these browsers increase the line height beyond the declared value to accommodate the baseline.

Line Height Declarations on Spans

A span is an inline element that can be used to style text that is within a paragraph or other block element. By default, a span box's height is equal to the inherited line height or the tallest content box's height that it contains, whichever is greater (when it does not contain any replaced elements).
Increasing the line-height of a span to make it the tallest element in a line increases the line height of the entire line.

When a span's background color is specified, only the content box gets the color. This can be seen in the example below:
<pstyle="font-size:16px;background-color:green;line-height:22px">The<spanstyle="line-height:31px;background-color:fuchsia">Five</span>Boxing Wizards Jump Quickly</p>

When the difference between the <p> line height and the span's content box height is an even number, there will be an equal number of pixels above and below the content box. When it is an odd number, Firefox 3 sometimes puts the extra pixel at the top and at other times, at the bottom (depending on unknown factors). Internet Explorer 6 and 7 always put the extra pixel at the top. Opera9.6 and Safari 3.2.2 always put the extra pixel at the bottom.

When a span's line height is increased to make it the tallest box in a line, only those lines of the paragraph that contain the span have their line height increased. This can be seen below. In the example, the contents of the paragraph are wrapped to two lines. Since only the first line contains the span, only that line gets the increased line height.

<p style="font-size:16px;background-color:green;line-height:19px">The<span style="line-height:31px;background-color:fuchsia">Five</span>Boxing Wizards Jump Quickly</p>

Specifying a span's line height to less than the browser's default allocation has no visible effect. This is because there is no way of making the background color or image of a span fill up the entire line box. However, the reduced line box height of the span affects the way the span is positioned by the vertical-align property.

Line Height Declarations and Replaced Elements

Line height declarations on replaced elements are only used to calculate vertical-align percentage values, they do not affect the element in any other way.

Images are replaced elements. By default, the bottom of an image is aligned to the baseline of its parent element. When the height of an image exceeds the height of its parent element, the parent elements line box expands to accommodate the image fully.
Consider an element whose line height has been reduced such that the baseline falls out of the line box. If such an element contains an image, since the bottom of images are aligned to the baseline, the line box of the element is expanded such that the baseline (and the bottom of the image) is within the line box.

Example: <p class="test" style="font-family:'Times New Roman';font-size:35px;line-height: 20px">boxing @Â<img src="10x10.jpg" alt="10x10 image" /></p>
In the above example, even though the line height is declared as 20px, the line box is expanded to 22px to accomodate the bottom of the image which is aligned to the baseline.

In Internet Explorer 6, the height of the line box of an element that contains an image cannot be increased or decreased using the line-height declaration. This is a bug. However, if the text in the element spans multiple lines, those lines that do not contain images have their line box height altered by the line-height declaration. In Internet Explorer 7, this bug only affects elements of reduced line height (not increased).

Line Height of a <p> element with spans of different font sizes

By default, all the bits of text in a <p> element have their baselines aligned to each other. This is true even if a <p> element contains spans of text of different font sizes.

When there is a line height declared on an element that contains text of different font sizes, the height of the line box may be more than the declared line height. When text of different baseline heights are are aligned to each other's baselines, the midpoints of their content boxes sometimes fall out of alignment. Now, when line height is declared on an element, the value that is important is half the declared value, since the browser will create a line box whose height above and below the midpoint of the line is equal to half the line height.

Therefore, when the midpoints of two content boxes on a line are misaligned, the line box will have to expand to accommodate the top and bottom of both boxes. This will cause the height of the line box to be greater than the declared line height.

Example: <p style="font-family:'Times New Roman';line-height: 25px;font-size: 20px;">20px fontsize, 25px line-height Â@ <span style="font-size:50px;">font-size:50px Â@</span></p>

Each dot in the background image has a height of 4px.

Though the declared line height is 25px, the actual height of the line box will be 35px.

Line Height Inheritance

The default value for line height is normal. When the line height is declared using CSS on an element, it is inherited by all child elements. In the case of the relative length units em, exand percentages, it is the computed line height that is inherited. However, with raw numbers declarations, the raw numbers are themselves inherited, not the computed values.

Specifying line height in absolute units - pt, pc, in, cm and mm

These are the absolute units:

point (pt)

In CSS, one point is defined as 1/72 of an inch. Therefore, one point is 1.333 pixels (since 1 inch is equivalent to 96 pixels)

pica (pc)

One pica is 12 points. In CSS, one point is 1/72 of an inch, therefore, one pica is 1/6 of an inch. One pica is 16 pixels (since 1 inch is equivalent to 96 pixels)

inch (in)

Windows and Mac computers assume 96 pixels to be one inch (even though 96 pixels may not be equal to a real-world inch)

centimeters (cm)

One inch is 2.54 centimeters. Therefore, in CSS, one centimeter is 37.79 pixels

millimeters (mm)

Ten millimeters make one centimeter. One inch is 25.4 millimeters. Therefore, in CSS, one millimeter is 3.779 pixels

Here is an example of line height specified using absolute units:
<p style="line-height:29pt">The Five Boxing Wizards Jump Quickly</p>

Firefox 3 and Internet Explorer 6 and 7 correctly handle absolute unit line height declarations. However, Opera 9.6 and Safari 3.2.2's support of absolute unit line height declarations is buggy — they sometimes allocate one pixel less than what was specified.

Specifying line height in relative units - percentage, em and ex

When line height is specified in percentages, em's and ex's, the line height is calculated with respect to the font size (inherited or declared) of the element. When using percentages, em's and ex's for line height declarations, it is the computed line height that is passed on to child elements.

Using ex units does not result in consistent sizes across browsers and should therefore be avoided.

Line Height specified in Percentages

Here is an example of line height specified in percentage:
<p style="font-size:16px;line-height:175%;">The Five Boxing Wizards Jump Quickly</p>

In the above example, the line will get a line height of 16px * 1.75 = 28px

Rounding

With percentage line-height declarations, Firefox 3 is inconsistent in its rounding off of calculated line heights that have a decimal portion —0.5px to 0.9px is not always rounded off to 1px. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height with percentage line-height declarations.

With percentage line-height declarations, Opera 9.6 and Safari 3.2.2ignore numbers after the decimal place in computed line heights.

Line height in em's

Here is an example of line height specified in em's.
<p style="font-size:20px;line-height:1.05em">The Five Boxing Wizards Jump Quickly</p>

In the above example, the computed line height is 20px * 1.05 = 21px

Rounding

With em line-height declarations, Firefox 3 is inconsistent in its rounding off of calculated line heights that have a decimal portion — 0.5px to 0.9px is not always rounded off to 1px. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height in em line-height declarations.
With em line height declarations, Opera 9.6's rounding off of computed line heights is buggy. With em line-height declarations, Safari 3.2.2 ignores numbers after the decimal place of computed line heights.

Second Decimal Place Support

Firefox 3's support of em-specified line height declarations with two decimal places is buggy — it doesn't always give the expected size. Internet Explorer 6 and 7, Opera 9.6 and Safari 3.2.2 support em declarations containing two decimal places.

Line Height Declarations using Raw Numbers

Line height can also be declared as a raw number — without any units. The raw number is multiplied with the font size to obtain the line height. Here is an example:
<p style="line-height: 1.04">The Quick Brown Fox Jumps</p> Unlike line height declarations using units, the raw number of  the line height declaration is itself inherited (not the computed values). Example:
<div style="font-size:20px;line-height:1.5"><p style="font-size: 26px">The Five Boxing Wizards Jump Quickly</p></div>
The line height of the p in the above example will be 26px * 1.5 = 39px

Rounding

Rounding off of computed line heights of raw number line height declarations in Firefox 3 and Opera 9.6 is buggy. Internet Explorer 6 and Internet Explorer 7 correctly round off the decimal parts of computed line height of raw number line-height declarations. With raw number line-height declarations, Safari 3.2.2 ignores numbers after the decimal place of computed line heights.

Second Decimal Place Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 support two decimal places in raw number line height declarations. Safari 3.2.2's support for raw number line height declarations is buggy.