How to Adjust Leading in HTML

By Roy Huggins

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.

Adjust the Leading On a Paragraph of Text

Step 1

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

Lorem ipsum dolor sit amet...

Replace the "Lorem ipsum" text with enough text to make sure the paragraph wraps around to form several lines.Save your text file with a ".html" file extension.

Step 2

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:

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 3

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

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 4

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

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 5

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

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.

References & Resources