Leading

As with any text based rendering engine, it is also possible to adjust many additional properties of how the text is displayed. We will examine a few of these over the next couple pages.

The first in question is known as “leading” in typography. Leading is the space between the top x-height of a font and the line of text above it.

We will refer to this more simply as “line height”, as that is the css property which sets it (line-height: ). The line hight property in CSS sets the vertical spacing between the lines of text.

As with font size, you can set the line height through a number of units; including absolute and relative. If desires, one can set the line height as an absolute pixel (px) value. However, you are encouraged to use a number, percent, or ems.

When you include a number, without any unit attached, the browser multiplies the current font size to set the line height.

This is equivalent to calling a percentage or em. So, the following are all the same;

line-height: 2;
line-height: 200%;
line-height: 2em;

For an example of using numbers, percentages, or ems visit;

What is an appropriate line height?

An appropriate line height, at its simplest, is one that encourages readability and understanding of the content.

However, in general, ideal leading ratios tend to be mentioned in the range of 1.2 - 1.45 times the text size. This is typically larger than the size of a horizontal space between words, which encourages the eyes movement along the line. But, not so large as to make text look separate from each other.

Example

In the following example, each div element contains a h1 heading and paragraph, so that the line height can be evaluated. Each paragraph’s first sentance mentiones that line height, then continues with Lorem Ipsum (or dummy text).

Each paragraph is similar to;

<div class="parent-1">
    <h1>1.45em</h1>
    <p class="p1">This is suppose to be the ideal line height at 1.45em. Ad nisi ea culpa cillum aliquip ad sit. Minim aliquip culpa occaecat consequat anim aute voluptate commodo dolore culpa nulla tempor ut. Irure sint incididunt nulla laborum occaecat sit labore nulla irure. Amet do exercitation proident in esse anim id velit proident dolore magna. Magna sit in voluptate commodo duis cupidatat esse duis ut exercitation deserunt mollit aliqua nulla.</p>
</div>

There are 6 paragraphs, with the following values for line-height: ;

• 1.45em
• 1.0em
• 0.75em
• 0.1em
• 2.0em
• 4.0em

The result is as follows;

To view this in a separate window, or to view the code;