Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 117

6 In the style rule for heading 2 (h2), type the following line (highlighted in red):

h2 {

font-family:Zapfi no;

}

7 Save your document and preview it in your browser.

Styling the heading 2 as Zapfi no will only show up if that font is on a user’s system.

If you have the Zapfi no font on your system, you see a calligraphic script for your heading.
The Zapfi no font is installed with Adobe applications such as Photoshop, so it is very
likely that designers will have this font on their system. However as noted earlier, many
users on the web do not have this font on their system and so setting it is not a good idea.

8 Select the entire font-family line in your h2 rule and delete it.

The promising future of web fonts

The lack of choices for using fonts on the web has been a source of frustration for web designers

for many years. The situation is improving as several companies have created solutions to enable

your pages to display on a browser with the fonts you’ve specifi ed as a designer.

Some of the methods use paid services, but free options are also available. Here are some

resources to get you started:

• http://code.google.com/webfonts


• http://typekit.com/


• http://fontdeck.com/


• http://www.fontsquirrel.com/fontface