Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 129

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

h1 {

/*border:thin red solid;*/

line-height:1.5em;

font-size:1.5em;

font-weight:normal;

}

2 Save your fi le and preview the page in your browser.

By setting the font-weight to normal, you have decreased the thickness of the heading.
The default browser styling for a heading 1 is actually bold, so you are essentially resetting
this bold style to normal. The default browser styling for all headings is bold, and you can see
this by comparing the styles of your heading 1 to your heading 2. The heading 2 has thicker
letterforms and even though it is smaller in size, it appears more dominant on the screen.

There are additional values for the font-weight property. Here you’ll lighten the value for
the heading 2 and then add a new text-transform property.

3 Add the following code to your h2 element:

font-weight:lighter;

text-transform:uppercase;

The value lighter for the font-weight reduces the thickness of the letterforms further,
and the value for text-transform converts your text to uppercase.
4 Save your fi le and preview the page in your browser.
Your heading is now in uppercase. This is a good example of how CSS controls style.
The HTML code shows that the source text is still lowercase; however, the display of the
characters is controlled by the CSS.
5 Return to your text editor and add the following code to the same h2 style:
letter-spacing:0.2em;
Letter-spacing controls the amount of space between characters. In print design this
is called kerning and tracking. Save your page and preview the page in your browser. By
increasing letter-spacing, you can add a bit more space around the letters in condensed
headlines. However, you should be careful about adding too much letter-spacing, as it
can make headlines harder to read.

It is even possible to set negative values for most of these CSS properties (letter-spacing:

–0.4em, for example), although you will not be doing this as often. Experiment with diff erent

combinations of fonts and styles, and you might be surprised with what you can come up with.