This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

Implementation of line-height

Table of contents

Introduction to line-height

A CSS suggestion for a visual presentation is based on the idea that a browsers rendering engine first generates suitable boxes to come up with a page layout that conforms to the cascaded result of all stylesheets made available to the renderer to be used for a given media type.

At the very bottom of the box rendering idea for text presentation we can find a box that is defined inside the current font file in use, namely the character cell box . Each character defined in a font has its own box where the height of the box is equal to the current font-size and the width of the box will depend on the character it self, for proportional fonts, or have a constant and equal width for all characters for a mono spaced font.

A CSS1 conforming rendering engine can not do much about the proportions of character cell boxes while a CSS2 conforming renderer can make use of a few properties like font-size-adjust and font-stretch to suggest a few changes to the character cell box it self.

A series of characters set in succession forms a line box with a height at least equal to the currently defined font-size and such a line box, is in most practical situations, the box with the smallest height that can be used for running text. Several successive lines of text based on such line boxes placed flush below each other would then form a block of multi line text where the line-height would be equal to the font-size .

Reference to the CSS1 specification

Text as quoted from the CSS1 recommendation section 4.4 The height of lines

All elements have a line-height property that, in principle, gives the total height of a line of text. Space is added above and below the text of the line to arrive at that line-height .

For example, if the text is 12pt high and line-height is set to '14pt', an extra space of 2pt is added, namely 1pt above and 1pt below the line.

Empty elements influence these calculations just like elements with content. The difference between the font-size and the line-height is called the leading . Half the leading is called the half-leading . After formatting, each line will form a rectangular line-box . The box properties set the size, circumference and position of the boxes that represent elements.
» » »

Compact setting explained

Compact setting illustrated The illustration that goes along with this section is an example of a block of text that has been formed using two line boxes directly set together as described in the previous section.

The illustration is based on a type design (MS Georgia) where characters with diacritical marks are available and it can be viewed in full size here for easier detail study of character cell sizes, font size and baseline distance.

Text that has been set as close as this example shows is said to have a compact setting and is almost never used for normal presentation of information. Exceptions may be when a certain area is already specified and a specific amount of text has to be fitted into that area, but that would then be the result of a careful examination of available options.

Demo1, CSS based example using line-height at 1.0

This following CSS rule …

P.demo1 { background: none #ffffcc; color: #000000; font-size: 2em; font-family: Georgia, serif; margin: 0.3em 12px; padding: 0 0.5em; border: solid 1px #0000ff; text-align: center; text-indent: 0; line-height: 1; }

… is used to suggest the following compact rendering example.

Ép … And these lines should, for users of conforming CSS Browsers, come out in a way that demonstrates a Compact setting of text at double the default font-size … Ép.

(please note that the top and bottom of character cells are sitting very close to the corresponding top and bottom border lines respectively).

Traditional typesetting during the lead for print era used a method called leading to adjust the distance between text lines within blocks of text. Leading was done in practice by inserting strips of brass, with a known thickness, between the lines made up from casted types and the typesetter had full freedom here to balance his black & white impression as required to meet a condition of best possible readability.

CSS1/2 as defined, does not offer a property that would replicate the old leading practice full out, the closest it comes is in the property line-height that has a basic definition in CSS1 and is further defined, as to how it should be implemented, in CSS2 . As it turns out, the suggested method for implementation of line-height adds a little bit of sand in the machinery , as the next section is set up to illustrate.

Line-height at 1.3 in action

Line-height 1.3 illustrated For this example of line-height in action, the following illustration has been created, where you can find the same two lines of text as in the previous example, but this time in a setting that reflects the way they would come out if a value of 1.3 is given for the line-height property.

As the CSS specs now suggests, the net effect of a stylesheet that specifies {line-height:1.3} for these two lines of text, is to create line boxes for the two lines that have a height of 1.3 times the font-size , and place the character cell boxes from the font vertically centered in these line boxes so we end up with an area of white space sized at 0.15 times the font-size at the top and bottom of each line of text.

The result of this will of course be that we get the base lines of our two lines of text separated to 1.3 times the font-size , but it should be noted that the principle of above & below half leading is to be implemented even for the first and last line of said block.

Demo2, CSS based example using line-height at 1.3

This following CSS rule …

P.demo2 { background: none #ffffcc; color: #000000; font-size: 2em; font-family: Georgia, serif; margin: 0.3em 12px; padding: 0 0.5em; border: solid 1px #0000ff; text-align: center; text-indent: 0; line-height: 1.3; }

… is used to suggest the following non compact rendering example.

Ép … And these lines should, for users of conforming CSS Browsers, come out in a way that demonstrates a Non Compact setting of text at double the default font-size … Ép.

(please note that the top and bottom of character cells now have got a small gap between them and their corresponding top and bottom border lines respectively).

In a CSS guided presentation this last demo will show that each character linebox has been increased to 1.3 times the font-size in use, so now the lines of text are separated that much extra as compared to the compact example in Demo1 in the previous section.

It's a bit unfortunate that the recommended way to implement the line-height property allows for half-leading to be used above the top line, and below the bottom line, of a standard block of text. The net result of that is an area of white space is created above and below that block that is no longer accessible for any kind of separate sizing suggestion by the CSS author.

The basic reason for that is that the line-height property is not designed to suggest spacing of text baselines to start with, contrary to what's said in the CSS1 spec, but instead it is just the property that controls the height of the box that lives as the most inner part of the CSS box rendering model.

(and forget about trying to use negative values for the padding property to get at that top/bottom white space area, that is not valid as per current CSS specs)

More on the line-height mystery

Others have penetrated the line-height mystery of CSS to much greater depths than I have set out to do in this page, so if you happen to be up to the follow through story after reading my touch base summary, the following two links are the best I know to point you to.

Happy line-height confusion to you all …

David Baron comments on the Inline Box Model

Eric Meyer on the Inline formatting model

-

Jan Roland Eriksson