Computers > Web Design

How to Set Text Line Height in HTML Using CSS to Set Spacing Between Lines of Text

Line height is what gives text the appearance of vertical space between each line of text and can be adjusted using CSS:

Here is example #1 text line height that you see here with two lines of text in total.	Default. No line height applied.
Here is example #2 text line height that you see here with two lines of text in total.	Green text set at line-height: 30px;
Here is example #3 text line height that you see here with two lines of text in total.	Overlapping text at line-height: 5px;

In example #3 it becomes more clear the behavior of line-height. The measurement in PX begins text letter-bottom to 2nd line text letter-bottom:

Text line height measured text bottom to text bottom of second line

Text line height measured text bottom to text bottom of second line

Here is the full CSS as shown in the examples above:

The green text example style

.green {
     color: #006633;
     font-size: 12px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     line-height: 30px;
}

The overlapping text style

.red {
      color: #CC0033;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      line-height: 5px;
}