The common term for the spacing between lines is leading. The common term that Web designers scream when they find out they can now control leading is, "Wheee!"
line-height
line-height is a godsend. With it, we can achieve control over the vertical spacing between lines of text:
Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders — "x" but not "y," for example — sit on). Note that your value totally replaces the default browser value.
Netscape Communicator and Internet Explorer add the line-height value before the line. Thus, if you specify a value of 10px, then the browsers will display the first line of text 10 pixels down.
There are three different ways to give a value to line-height:
- by number,
- by length unit, and
- by percentage.
Leading by Number
When you specify line-height with a number, the browser uses font-size to obtain the leading: It multiplies font-size by the number. So in this example, the line-height is 24 points, like so:
Four score and seven years ago, the Web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?
If your browser doesn't support this CSS property, click here to see what it looks like.
By the way, you can also use nonintegers (such as 2.3) as values.
(You should know that IE 3 doesn't support number values. More often than not, using number values with IE 3 will result in a big mess of overlapping text.)
Leading by Length Unit
B { font-size: 12pt; line-height: 11pt }
Another way to define line-height is by using any of the length units we reviewed on the previous page (em and pt are most commonly used). Here's the above stylesheet rule in action:
Four score and seven years ago, the Web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?
If your browser doesn't support this CSS property, click here to see what it looks like.
Note that you can make lines of text closer together just as easily as you can separate them. It's easy with stylesheets!
Leading by Percentage
B { font-size: 10pt; line-height: 140% }
If you want yet another way to use line-height, try percentage values. In the above example, the leading is 140 percent of 10 points or 14 points. You get the idea.
Overlapping Text
You might have already asked yourself this question: What happens when line-height is so small that the lines of text overlap?
Well, they overlap, that's what. Check out this code:
B { font-size: 28pt; line-height: 2pt }
Here's what you get:
If your browser doesn't support this CSS property, click here to see what it looks like.
"Whoa" uses the browser's default line-height, but "Cool" has so little line-height that it lies on top of the first line.
(Communicator and Internet Explorer interpret line-height differently. In Communicator, the text above is overlapped quite a bit. In IE 5, it's not overlapped at all.)
If you want to overlap elements on your page, line-height isn't the best way to do it because of browser inconsistencies. In Lesson 5, we'll look at the best ways to layer text, images, and so on.
Now that we can control the spacing of lines of text, let's move on and talk about the alignment of entire paragraphs.
next page»
