Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 121

11 Close your browser and return to the text editor. In the rule for the paragraph, change

the following value (highlighted in red):

font-size:0.875em;

12 Save your fi le and preview the page in your browser. Your paragraph text is now smaller.

The reason for using the precise 0.875 value is because it is the font-size equivalent to

14 pixels.

If you’re starting to think that web design is all about math, don’t worry too much. It all gets easier

from here. However, if you are interested in understanding the math more deeply, you multiply the

em value (0.875) by the browser’s default pixel value (16) to arrive at the 14-pixel number.

13 You will now size your headings using ems as well. For the h1 property, add the
following line (highlighted in red):
h1 {
font-size:1.5em;
}

This scales the top heading to 1.5 times the size of your body text; in this case, it is the

equivalent of 24 pixels. Save your fi le and preview the page in your browser to see the eff ect.

Your heading 1 element is set to 1.5em, the equivalent of 24 pixels.

Now the h1 is approximately the same size as the h2, which isn’t particularly logical, so

you will reduce the size of the h2 heading as well.

14 For the h2 property, add the following line (highlighted in red):

h2 {

font-size:1.25em;

}

This scales the top heading to 1.25 times the size of your body text, which is the

equivalent of 20 pixels.