CSS Line Spacing - Web Design 101

How to use CSS line spacing

The property that controls CSS line spacing is not the most intuitive, and is actually called line-height. There are four different ways that you can modify the line spacing using this property, and we will cover each case in this introduction. The first is the default setting, which defines a standard single spaced line height. The syntax for this is:

line-height: normal;

You can also use a number to set the CSS line spacing. This number will act as a multiplier, so .5 would cut the line spacing in half, and 2 would double the line spacing. A value of 1 is identical to the “normal” line spacing. Below are two examples of this syntax, the first being double line spacing and the second being one-half line spacing:

line-height: 2;

line-height: .5;

Another method to set the CSS line spacing is through percentages. Similar to the number method, the percentage is a modification of the normal line spacing. This means that a 50% setting will cut the line spacing in half, and a setting of 200% will double the line spacing. Examples of each of these would look like this:

line-height: 200%;

line-height: 50%;

Finally, you can set the CSS line spacing through pixel values. A good rule of thumb is that the standard pixel value for a line spacing is about 20 pixels, however this will vary depending on a number of factors. This syntax is primarily used when you want an exact pixel value for spacing, which is not very often. Setting this to 0px means that there is no space between each line of text. A few examples are:

line-height: 30px;

line-height: 10px;

Examples of CSS line spacing

You are free to choose any of the three ways to modify the CSS line spacing in your pages, but the percentage and number methods are generally accepted as the most accurate and consistent across browsers. The pixel method can have variable behavior based upon the font, font size, and

browser used. This makes it a less than ideal candidate if you are looking for a universal user experience. The number and percentage methods also follow the same scale, so a 2 on the number scale is identical to 200% on the percentage scale. As an example, below is the CSS line spacing code for each of these two methods, which will render like the example to the right:

.percent { line-height: 200%; }

.number { line-height: 2; }

While there are not many common ‘cool’ uses for this style, it is the still the easiest and most reliable way to customize the line spacing on your web pages. One usage example would be if you were to post an academic paper online, and wanted to use CSS line spacing to double-space the paper so that it would match a printed version.