A Guide to CSS Line Spacing

Learn how to use the CSS style property line-height to affect your line spacing on your Web pages.

Values of CSS Line Spacing

CSS line spacing is affected by the CSS style property line-height. This property takes up to 5 different values:

• Normal: the browser determines a value for the line spacing that is related to the font size. This is usually the same as the font size or slightly larger (like 20%).
• Inherit: the line spacing should be taken from the parent element's line spacing. So if you set the line-height of your body tag to 30% larger than the font size and the paragraph tags inside that are set to inherit, they will also have a line-height of 30% larger than the font-size.
• A Number: If the line-height value has no unit of measure, it is considered to be a multiplier on the font size for the line-height. So a line-height of 1.25 would be 25% larger than the font size.
• A Length: If the line-height value has a unit of measure, that is the exact amount of space there should be between the lines. So, 1.25mm would result in lines 1.25 millimeters apart.
• A Percentage: If the line-height is a percentage, that would be a percentage of the font size. So a line-height of 125% would be 25% larger than the font size.

Which Value Should You Use for CSS Line Spacing

In most cases, the best choice for line spacing is to leave it at the default or "normal." This is generally the most readable and doesn't require that you do anything special. But changing the line spacing can give your text a different feel to it.

If your font size is defined as ems or percentages, your line-height should also be defined that way. This is the most flexible form of line spacing because it allows the reader to resize their fonts and keeps the same ratio on your line spacing.

Set line-height for print style sheets with a point (pt) value. The point is a print measure, and so your font sizes should be in points as well.

We don't like to use the number choice because we've found that it's most confusing to people. Many people think that the number is an absolute size, and so they make it huge. For instance, you might have a font set at 14px and then you set your line-height to 14 which results in huge gaps between the lines because the line spacing is set to 14 times the font size.

How Much Space Should You Use for Your Line Spacing

As mentioned above, we recommend using the default line spacing unless you have a specific reason to change it. Changing the line spacing can have different effects:

• Text that is very tight together can be difficult to read. But small line spaces can affect the mood of the text. If the text is scrunched together it can make the sense of the text seem darker or denser.
• Text that is farther apart can also be difficult to read. But wide line spaces make the text seem more flowing and fluid.
• Changing the line spacing can make text that otherwise wouldn't fit in a space be more compact or take up more space in your designs.