How to Adjust Leading in HTML

Throughout the Web's childhood and adolescent years, print designers have struggled to bring the precise tools of their craft into the realm of HTML-based design. For a long time, concepts such as leading were difficult to execute and unreliably rendered by different readers' browsers. As the Web matured, however, the technology called CSS gave designers the power to reliably execute concepts such as leading with ease and reliability. You can change the leading of a paragraph of text simply by using the "line-height" CSS property.

...
Most print design techniques can also be executed in Web pages.

Adjust the Leading On a Paragraph of Text

Step

Open a text file with your favorite text editor and create an example HTML page with a single paragraph like this:

Step

Lorem ipsum dolor sit amet…

Step

Replace the "Lorem ipsum" text with enough text to make sure the paragraph wraps around to form several lines.

Step

Save your text file with a ".html" file extension.

Step

Add CSS code to your paragraph (

) tag to set the "line-height" property. This property is how CSS refers to the concept of leading. Also set the "font-size" property to 12 points so you can see how different units of line height change the appearance. Modify the paragraph tag like this:

Step

Step

Save your file. Open your text file in a web browser. You'll see that the leading of your text is taller than standard text in your browser. The setting you have now will change the leading based on the current font size. In this case, the leading is two ems or two times the size of the font.

Step

Change the font size to eight points and see how the leading changes along with the text size, like this:

Step

Step

Save your file and refresh your browser to view the change. The leading should be the same as before relative to the font's size.

Step

Change the paragraph tag to define the leading with pixels instead of ems, like this:

Step

Step

Save your file and refresh your browser. This new setting will put exactly ten pixels between the baselines of lines of 12-point text.

Step

Change the font size to eight points and see how the leading changes along with the text size, like this:

Step

Step

Save your file and refresh your browser to view the change. You'll see that the amount of leading is different, relative to the font size, from the 12-point font version. This is because using pixels as your unit for setting line height causes the leading to be static, and not based on font size.