Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 127

13 Repeat step 12 by adding the commenting code to the two other border properties in

your h1 and h2 styles.

14 Save your fi le and view the page in your browser to see your page without any borders.

The fi nal result of modifying your margins by deactivating the borders.

Setting paragraph line-height

To improve readability of your text, you can change line-height, which is the amount of
space between lines. In the world of print design this is called leading, but the concept here is
the same: changing the amount of space between sentences can aff ect the readability of your
text. A line-height that is too small results in cramped text, while a line-height that is
too high risks losing the reader’s focus. However, you can’t just set a universal line-height
value and be done with it; line-height is connected to a number of factors including the
amount of text and the width of the text block, as well as the color, size, and choice of font.
In this exercise you will set the line-height of your current paragraphs.

1 Add the following code (highlighted in red) to your p element:

p {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.875em;

/*border:thin red solid;*/

margin-top:0em;

margin-bottom:1.5em;

line-height:1.75em;

}