Space, the Final Font-tier:

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.

Leading (or Line Height)

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 desired, 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;
}

“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.

An 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:

Let’s try 6 paragraphs, with the following values for line-height: ;

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

Kerning (or Horizontal Spacing)

Kerning is the amount of space placed between characters in typography. To adjust the amount of space between characters in css, use the letter-spacing: property.

As with line-height: , this property can be passed absolute values, the word normal to use the default, and relative values. When using relative values, be aware that ems will be in relation to the font itself, and percentages will be in relation to the parent element.

It is sometimes useful to space characters out. However, most of the time, this quality can be used to achieve visual text effects for branding, delineating sections, or to make a particular piece of content stand out.

An Example

In the following example there are four h2 headings with various spacing. Notice how they change the visual effect of the text.

NOTE: Negative values are valid, and can be used to create a “tighter” presentation of text.

Word Spacing

In addition to being able to adjust the space between characters, developers can adjust the amount of space between words only, using the word-spacing: property.

{ TODO: }

1. Read pages 283-284 of Chapter 12 in Duckett.
2. Explore this area on our “Go Further With Fonts” page.