Web Design with HTML and CSS

122

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

15 Save your fi le and preview it in the browser. You now have text proportioned as needed.

Remember that one of the main reasons why ems are used is to adjust for users who resize

the text in their browser. You can simulate this by going into your browser and enlarging the

text size. You can see that the text responds well to this enlarging and reducing. When you are

fi nished, be sure to return the text size to the default setting. Most browsers have a command

to allow you to do this.

The issue of browsers resizing text is a bit more complicated because some browsers use a zoom

feature that increases or decreases magnifi cation of the entire page. Zoom-enabled browsers may

also have a text-only resize option.

There is another benefi t of using ems, and this has to do with the scaling relationship

between all elements that use ems.

16 In your body property, modify the following value (highlighted in red):

font-size:85%;

17 Save your fi le and preview your page. All your text is now smaller, even though you just

changed one value! This is because of the linked relationship the em has to the body

element. Some designers adjust this base size if, for example, a client wants larger or

smaller text across the entire site. Rather than modifying all the individual properties,

having one rule control multiple font-sizes makes it easy to do.

18 Return the font-size value to the original 100% value (highlighted in red):

font-size:100%;

Save your document.