You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Problems With line-height

The following paragraph contains various sizes of text. However, because the line-height is set numerically, there should be no overlap of text.

For each line, the line height should be the line-height of the biggest element on the line.

   .example       { font-size: 10px; }
   .one   { line-height: 1.3; }

Calculated line height here should be 13 pixels. 250%: Calculated line height here should be about 33 pixels. Calculated line height here should be 13 pixels. 350%: Calculated line height here should be about 46 pixels. Calculated line height here should be 13 pixels. 50%: Calculated line height here should be about 7 pixels. Calculated line height here should be 13 pixels. 200%: Calculated line height here should be about 26 pixels. Calculated line height here should be 13 pixels.

Once again: there should be no overlap in the text above.