All designers know the importance of white space- and often, the difference between a good design and a great design is manipulating the white space on a page, especially when you’re dealing with large blocks of text, such as on a website. Which is why knowing how to set your text leading using the CSS property line-height is a good idea.
First, you need to know what property values you can choose from. These are:
- normal : the default line height.
- number value : a number to be multiplied with your current font size. For example: 1.2 or 1.3.
- length value : a specific line height, such as px, pt, em.
- percentage : a percentage of your current font size.
- inherit : wherein the value will be inherited from the element’s parent element.
As you can see, font size is very important when it comes to line height. If, for example, you do this:
body { font-size: 12px; line-height: 140%; }
h1 { font-size: 24px; }
The browser will calculate the body font size (12) multiplied by the line height (140%) and give you a line-height of 16.8. This is fine for your fonts at sizes 12px, but what happens to your h1, which is at 24px? It inherits the 16.8 line-height. As a result, your h1 elements will have line spacing that’s too tight.
You can, of course, fix this by specifying a line-height for your h1 element as well. Like so:
body { font-size: 12px; line-height: 140%; }
h1 { font-size: 24px; line-height: 125%; }
But then you would have to do this for all the affected elements on your page. This is what happens when you use a length value or a percentage.
Now here’s what’s better: using the number value,
body { font-size: 12px; line-height: 1.2; }
h1 { font-size: 24px; }
Because the number value calculates line-height relative to each element’s font size, you need only define it once. In the example above, the browser will multiply 12 by 1.4, giving you a line-height of 16.8 (as in the previous example), and for your h1 elements it’ll multiply 24 by 1.4 as well, giving them line-heights of 33.6, which is a little loose for my taste, but much better than squishing up your lines.
Finally, here’s the CSS shorthand for defining line-heights:
font: font-size/line-height font-family;
How do you define your line-heights?
