line-height

by letterliu

Initial: normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.

In CSS, the line-height is not the distance between baselines

it breaks down the popular belief that line-height is the distance between baselines.

In CSS, IT IS NOT.

Let’s talk about font-size first.





<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>




p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

Look at this simple HTML code, a <p> tag containing 3 <span>, each with a different font-family

Different font-families, same font-size, give various heights

Elements with font-size: 100px have height that varies from 97px to 164px

em

a font defines its em-square (or UPM, units per em), a kind of container where each character will be drawn. This square uses relative units and is generally set at 1000 units. But it can also be 1024, 2048 or anything else.

based on its relative units, metrics of the fonts are set (ascender, descender, capital height, x-height, etc.).Note that some values can bleed outside of the em-square.

in the browser, relative units are scaled to fit the desired font-size.

That means the Catamaran font uses 1100 + 540 units in a 1000 units em-square, which gives a height of 164px when setting font-size: 100px.

line-box

Each HTML element is actually a stack of line-boxes. If you know the height of each line-box, you know the height of an element.

A <p> (black border) is made of line-boxes (white borders) that contain inline elements (solid borders) and anonymous inline elements (dashed borders)

Even though it may sound strange, an inline element has two different height:

the content-area height and
the virtual-area height

If height is auto, then line-height is used and the content-area is strictly equal to the line-height.

leading

The computed difference of height between the virtual-area and the content-area is called the leading. Half this leading is added on top of the content-area, the other half is added on the bottom. The content-area is therefore always on the middle of the virtual-area.

Using line-height: 1 can create a line-box smaller than the content-area.

line gap

As a comparison, the Arial font describes an em-square of 2048 units, an ascender of 1854, a descender of 434 and a line gap of 67. It means that font-size: 100px gives a content-area of 112px (1117 units) and a line-height: normal of 115px (1150 units or 1.15). All these metrics are font-specific, and set by the font designer.

It becomes obvious that setting line-height: 1

is a bad practice.

For what it’s worth, on the 1117 fonts installed on my computer (yes, I installed all fonts from Google Web Fonts), 1059 fonts, around 95%, have a computed line-height greater than 1. Their computed line-height goes from 0.618 to 3.378. You’ve read it well, 3.378!