Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Fonts and Typography

There are four main font properties that you can style using CSS: family, style, size, and weight. Between them you can fine-tune the way text displays in your web pages and/or when printed, and so on.

font-family

This property assigns the font to use. It also supports listing a variety of fonts in order of preference from left to right, so that styling can fall back gracefully when the user doesn’t have the preferred font installed. For example, to set the default font for paragraphs you might use a CSS rule such as this:

p { font-family:Verdana, Arial, Helvetica, sans-serif; }

Where a font name is made up of two or more words, you must enclose the name in quotation marks, like this:

p { font-family:"Times New Roman", Georgia, serif; }

Note

Because they should be available on virtually all web browsers and operating systems, the safest font families to use on a web page are Arial, Helvetica, Times New Roman, Times, Courier New, and Courier. The Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact fonts are safe for Mac and PC use, but may not be installed on other operating systems such as Linux. Other common but less-safe fonts are Palatino, Garamond, Bookman, and Avant Garde. If you use one of the less-safe fonts make sure you offer fallbacks of one or more safer fonts in your CSS so that your web pages will degrade gracefully on browsers without your preferred fonts.

Figure 18-6 shows these two sets of CSS rules being applied.

Figure 18-6. Selecting ...