Font Properties

Font Properties

The relationship of font sizes is key to indicating the hierarchy of the text in your document. This is achieved through an understanding of the various font properties and an understanding of how font properties can be inherited through the hierarchy of your document. Let's take at the font properties now.

Font-Style Property

Example: H2 {font-style:italic}

Other values: normal, oblique

Font style determines whether a font is italicized or not. It's that simple. If you want a piece of text to be italicized, you write this

p {font-style:italic;}

You can also write oblique instead of italic, but generally, the result is the same. The difference between the two is that, supposedly, italic is simply a distortion applied to the regular font to make it lean to the right, whereas an oblique font is actually designed as a font in its own right and therefore, the theory goes, is more pure. These niceties are pretty much lost on the Web, where a font variation such as Helvetica Oblique can't be specified even though if exists as a font on the user's machine,, and oblique doesn't even alter the regular type in older browsers such as Netscape 4.7.

So, there are only two useful settings for the font-style property: italic to make regular text italicized, and normal to make a section within italicized type regular "upright" text. In this example,

p {font-style:italic;}
span{font-style:normal}
<p>This is italicized type with <span>a piece of non-italic text</span> in the middle.</p>

the code produces the result in Figure 3.11.

Note on the Value Normal normal causes any of the possible effects of a property not to be applied. Why might you want to do this, you ask? As I showed you in the font-style example in the main text, setting font-style:normal leaves the text in its regular state, rather than italicized. The reason this option is available is so that you can selectively override a default or a global property you have set. Headlines h1 through h6 are bold by default, so if you want to unbold the H3 element, for example, you need to write h3 {font-weight:normal;}. If your style sheet states a {font-variant:small-caps;} so that all links are in small caps and you want one special set of links to be in regular upper- and lowercase type, you might write a declaration such as a.speciallink {font-variant:normal:}.

Font-Weight Property

Example: a {font-weight:bold}

Possible values: 100, 200, and so on to 900, or bold, bolder, lighter, normal

The W3C recommendations for implementing this property simply state that each successive higher value (whether numerical or "weight" values) must produce boldness equal to or heavier than the previous lower value.

bold and bolder give two weights of boldness. lighter allows you to go one step in the other direction if you want a section within bold type to be, well, lighter.

Figure 3.12 shows a little test I ran on some different browsers.

Can you see more than two weights for any given browser among these results? Nor can I. I even tried different fonts, but to no avail. There really are only two results for all the font-weight valuesbold or normal. Boldness variations would be a nice way to show a hierarchy in all kinds of data, especially when you could easily generate the different numerical values mathematically from middleware (for example, ASP or PHP) code to automatically highlight results that cross certain thresholds. In the following section, I show you a relatively simple and useful representational method that the browser makers could give us designers. Certainly there's room for improvement here, as the results show.

Font-Variant Property

Example: blockquote {font-variant:small-caps;}

Values: small-caps, normal

This property accepts just one value (besides normal) and that is small-caps. This causes all lowercase letters to be set in small caps, like this

h3 {font-variant:small-caps;}

I often use small-caps with the first-line pseudo-class, which allows you to specify a style for the first line of an element. Typically you would use it on a paragraph (see Chapter 2). Again, use this styling sparingly because text in all uppercase is harder to read because it lacks the visual cues provided by the ascenders and descenders of lowercase type.

The Font Property Shorthand

Example: p {font: bold italic small-caps 12pt verdana, arial, sans-serif;}

<p>Here's a piece of text loaded up with every possible font property.</p>

The code above produces the result in Figure 3.13.

The font property is a nifty shortcut that lets you apply all of the font properties in a single declaration; this helps reduce the amount of CSS you have to write to achieve your desired font styling. You have to sequence the values in the correct order, however, so that the browser can interpret them correctly.

Two simple rules apply:

Rule 1: Values for font-size and font-family must always be declared.

Rule 2: The sequence for the values is as follows: