How to Use Line-Height in CSS

A line-height of 1.5

The CSS line-height property determines the distance or spacing between the lines of text on the page. In the print world, this property is called leading. Finding the right line-height for your web page can make a big difference in the readability of your page. Here is how.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Web page
• Stylesheet

1. The perfect line-height will depend on your choice of font family. In my examples, I'm using a sans-serif font. Some fonts are "taller" than others. Tahoma looks good at 1.5, but Times Roman might not. Generally, you don't want the lines to be too close together or too far apart. You want enough space between the lines to create maximum readability, or the appearance of ease of reading. You want an open and inviting look rather than a "dense" look, which discourages reading.

2. Line-height can be applied to any text element, but it's probably best to set it in the CSS rule for body in your stylesheet. All of the textual elements on your page will inherit that line-height value, which can be adjusted if needed for specific parts of the page.

3. Here's a specific example of a CSS rule using line-height:
   body {
   font: 1em/1.5 Tahoma, Geneva, sans-serif;
   }

   To give you the same rule not in CSS shorthand, it would be:

   body { font-size: 1em;
   line-height: 1.5;
   font-family: Tahoma, Geneva, sans-serif;
   }

4. Notice that there is no unit attached to the the line-height value. No px, % or em units should be assigned to the line-height value.

Resources

• More Line-Height Examples