Web Design with HTML and CSS

128

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

2 Save your fi le and preview it in your browser. You now have extra space between the

lines in your paragraph.

Increasing the line-height values will increase the amount of space between paragraph lines.

Line-height works on any multiple-line body of text. For example, if your heading 1

SmoothieCentral is your #1 destination for smoothie recipes is broken over multiple

lines, you can set the line-height.

3 Add the following code to your h1 element:

line-height:1.5em;

4 Save your fi le and preview it in your browser.

Depending on your monitor resolution, you may need to narrow the width of your browser

in order to force the heading to break. The type in the heading is much larger than the

paragraph, so it wouldn’t do as well with the same line-height value.

You can feel free to override the browser defaults in order to control the look of your page.

Transforming text with CSS

As discussed earlier, the lack of choices when it comes type on the web is a bit constraining;

however, you have other options. There are a number of CSS properties that allow you to

control the appearance of your text in visually interesting ways. In this exercise you will

work with several styling techniques to create unique headings for your page, including

font-weight, text-transform, and letter-spacing.

The fi rst setting you will modify is the font-weight for your main heading in order to

decrease the thickness of the characters.