Use CSS To Improve Your Typography - Leading

Use CSS to improve your typography - Leading

 

Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition.

 

Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

 

This takes some finessing to get the right spacing but here is an example of what the code would look like:

 

1 body {

2 font-family: Helvetica, sans-serif;

3 font-size: 12px;

4 line-height: 16px;

5 }