Line-height

In a line of text, or text and pictures, there's an imaginary rectangle that encloses all the things on the line. This rectangle is called a line box. Line boxes stack vertically when text wraps. They are at least as tall as the tallest of the objects in them, commonsensical enough. But this minimal height is not very satisfactory when there are wrapped lines of text, there needs to be more breathing space, more space above and below the content. There are quite a few things involved in all of this, but for now, just think of line-height as a way to make these boxes tall enough (the extra space being distributed above and below the content within the line box) so they appear easy to read or pleasant to the eye when stacked one on top of the other in a wrapping situation.

The purpose of this page is one simple theme: what is the difference between giving a line-height as a pure number and giving it with a unit like px or em or %. We will use px as a unit in the following.

Below is red bordered box, it is a parent that is styled with 'line-height: 1.2'. The relevant CSS and HTML is underneath it. The ruler at the left of the box is divided into 10px units, each little line is a 10px division. Please read the contents of the text inside as it contains explanations, it is not mere demonstration text.

If you are puzzled by the scale of the ruler in relation to the text size in the red box below, you need to understand that while 40px is what I have set for that text in the parent, it will not necessarily be 40px on your browser. Setting it at 40px simply means that if you have your browser fonts set in a particular ("normal"?) way, it will be 40px. Still confused? It is a tricky matter and requires you to be understanding things about resolution, monitors and browsers simultaneously.

Let's put it this way for the moment: If you are using any decent browser, change your text size till the "big" text at the beginning of the red bordered element below is about 40px as measured by the ruler to your left. This ruler is marked in 10px divisions. The line-height will be 48px.

This is loose text, not further wrapped in element tags. It is just text in this red bordered div. It has a huge font-size of 40px set for it. The line-height of 1.2 set for this div means that the height of the line box is calculated by multiplying the text size by the line-height number; 40px by 1.2 gives 48px. 48px is the height of the line - providing the text is really 40px in size and not scaled to obscure this.

The font-size for this paragraph is set at 30px. This is big text and needs appropriate space between lines when it wraps. This paragraph's line-height of 1.2 is inherited from the parent div. The parent is just a div with a big thick border as you can see. The font-size that is set for this paragraph multiplied by 1.2, causes a line-height of 36px. The multiplier acts locally and appropriately. It ignores the font-size set for the parent which is set at 40px. It uses the 1.2 figure locally as a multiplier. It multiplies the local font-size to make things nice for wrapped line space. It looks roughly right for the eye. Any line-height of about 1.2 makes things look roughly right. 1.3 is sometimes advisable, some people advise it more than some times. It is a whole chapter of subtlety. Let's not go into it here.

The font-size for this paragraph is set at 16px. This is in the ballpark of normal content text (normally better set with em, as is all text - something else we shall not go into here). This particular paragraph's line-height is 1.2, inherited from the parent div. It is inherited in the way a gene for tallness is inherited, it does not make the recipient 6.6 ft tall like grandpa, but it makes him pretty tall depending on local factors (e.g. unlike grandpa and grandpa's siblings, the recipient and siblings might have been malnourished, the recipient still being taller than his own siblings who do not get the gene). The font-size for the paragraph, multiplied by 1.2 causes a line-height of 19.2px. The multiplier acts locally and appropriately. It ignores the font-size set for the parent. See the source below. Roughly right for the eye.

Fig 1


#pureMultiplier {
line-height: 1.2;
border: 4px solid #000;
font-size: 40px;
}

p.big {font-size: 30px;}

p.small {font-size: 16px;}

<div id="pureMultiplier">
This is loose text. In other words, it ...
<p class="big">The font-size for this para is set at 30px...</p>
<p class="small">The font-size for this para is set at 16px...</p>
</div>

The following box is a wrapper that is styled with 'line-height: 48px'. Obviously, I don't choose 1.2px in spite of this page being meant as a demo of the difference between a pure number and a number with unit. I am sure a moment's reflection will show how 1.2px is too absurd a height for any respectable line box. (The danger to newcomers is rarely seen when the units are ems or percentages because the differences are not always so immediately evident.) Let's simply choose a reasonable figure for text that is 40px in font-size, 48px seems about right. The relevant CSS and HTML is underneath it.

This is loose text. In other words, it is text that is not further wrapped in element tags. It is just text in this red bordered div. It has a huge font-size of 40px set for it. The line-height of 48px set for this div means that the height for the line of this text is 48px. Simple enough. In a way. 48px is the height of the line - providing the text is really 40px in size and not scaled differently. Naturally, it looks reasonably ok. The font-size is known and the line-height is given some spare. All deliberately.

The font-size for this paragraph is set at 30px. This is big text and needs appropriate space between lines when it wraps. This paragraph's line-height is inherited from the parent div directly without any local calculation to tailor it appropriately. The parent's line-height is 48px. Which is more than half again the font size of this paragraph. The font-size set for this paragraph (just 30px) is completely ignored in the line-height calculation. It may not look quite right. It is perhaps a bit too much. Or, if you think it right, you might dispute the decision to make the line-height so small for the big text above? If the difference is too subtle, never mind. The following paragraph should convince you of the dangers of putting units on to the end of the numbers for line-height.

The font-size for this paragraph is set at 16px to pin it down for this demo. This is in the ballpark of normal content text. This particular paragraph's line-height of 48px is inherited from the parent div wrapper and means the obvious thing of 48px for the height of the lines. Rather too spaced out. The important point here is that setting, a length unit (like px or mm) for line-height on a parent makes descendants inherit the same actual length, which is rarely appropriate. Of course, these values can be over-ridden by further attention of the author to line-height at the descendant level. But who wants to do that?

Fig 2


#length {
line-height: 48px;
border: 4px solid #c00;
font-size: 40px;
}

p.big {font-size: 30px;}

p.small {font-size: 16px;}

<div id="length">
This is loose text. In other words, it is ...
<p class="big">The font-size for this para is set at 30px...</p>
<p class="small">The font-size for this para is set at 16px...</p>
</div>

I have made this demo with reference to pixels for font-size and pixels for line-height. But similar considerations apply when using ems or percentages or any other units. In the case of percentages, the view is a little tricky because of the further relationship that a percentage has to another standard. But enough for now.