CSS line-height

The CSS line-height property specifies the height of each line of text, either absolutely (in px) or relative to the element's font-size (with no units). It determines the spacing between lines, but not the character size, which is set by font-size.

num%pxptemvw...
line-height: height
line-height: 1.2;    /* times font-size */
line-height: 20px;

The line-height property is inherited. The default normal height is calculated by the browser and is generally very readable.

Browser Support: Full.

line-height relative to font-size

The preferred way to specify line-height is to set it relative to font-size. This way it will scale gracefully when text is resized. There is one way to do it:

p.example{
font-size: 20px; line-height: 1.3;
}

A line-height of 1.3 is close to the default line-height rendered by browsers, and, as you can see, it's pretty readable. It is not always equal to 1.3em or 130% as explained in the next section.

Why not ems and percentages

There's an important difference between specifying line-height with no units vs. em units and percentages. The children of an element with line-height set as a number will inherit the number and their line-height will be recalculated based on their font-size. In contrast, when line-height is set in ems or percentages what is inherited is the computed value of the parent. Parent and children have the same absolute line-height, in pixels.

.parent1 {
font-size: 50px; line-height: 1.5;
} .parent2 {
font-size: 50px; line-height: 1.5em;
} .children {
font-size: 20px;
}
The line-height here is 1.5*20px = 30px
The line-height here is 1.5*50px = 75px

Vertical aligning with line-height

Because characters are placed in the vertical middle of their line height, the property comes in handy when vertical aligning a single line of text inside a fixed-height container:

div.vertical-aligned {
height: 50px; line-height: 50px; background: #efc466;
}
line-height = height for vertical align

About line-height

line-height will determine the height of block elements by increasing the spacing between lines. Because inline elements are in line (duh!), it changes their spacing, bot not their height, because they don't have one. The idea is, line-height doesn't really set a line height but a line spacing. Take the following:

span.example {
background: LightBlue; font-size: 20px; line-height: 60px;
}
This text explains why line-height is sometimes better understood as line spacing.

Recommended line height?

The best line height for body text depends on many variables. However, the normal line-height rendered by browsers (close to 1.2) is considered to be okay. Some sources recommend line heights between 1.2 and 1.45 for optimal readability.

The font Property is Shorthand

The font property provides a short hand for line-height:

font: font-size/line-height font-family

For example:

div.content {
font: 20px/1.4 arial,helvetica,sans-serif;
}
The line-height here is 20px*1.4 = 28px.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>