Font Styles and Variants

So far we have focused almost entirely on font sizing considerations. Now we will turn our attention to some of the more decorative aspects of styling fonts.

The terms style, weight and variant describe different aspects of how your type appears. Happily, these properties work pretty much as intended in all browsers newer than Netscape 4.x! These properties have been mentioned elsewhere, so this recap will be brief.

Font-Style

The font-style property describes the posture of the type, meaning the angle or slant of the typeface. The most common font-style is italic. Other values are oblique, which often results in the same look as italic, and normal. The syntax is:

p {font-style: italic;}

Font-Weight

The font-weight property refers to how heavy or light the typeface is. There are two types of values: words and numbers. A font-weight value can range from 100 to 900 or it can be bold, bolder, lighter or normal. The Stylin' book (p. 85) gives examples of how various browsers interpret different font-weight settings. These examples vividly illustrate why, at this time, the two recommended options for font-weight are "normal" and "bold." The syntax is:

a {font-weight: bold;}

Font-Variant

There are 2 values for font-variant: normal and small-caps. Small-caps causes lowercase letters to appear in small capital letters. The syntax is:

p {font-variant: small-caps;}

Example:

This sentence is typed in normal "sentence" case. That means the first letter of the first word in each sentence is capitalized and all the rest of the letters are in lowercase. However, this paragraph has a font-variant style applied to it which causes it to be styled in small caps. Notice the larger letter at the beginning of each sentence where a capital letter was applied while typing.

Note: The word "variant" is often misspelled. Be vigilant!

Font Shorthand

A shorthand method is avaliable for writing font properties so that you don't have to write out "font-family", "font-style", "font-weight", etc. for each style declaration. Here is a rule which contains all the font options spelled out individually:

p {
   font-style: italic; 
   font-weight: bold; 
   font-variant: small-caps; 
   font-family: arial, helvetica, sans-serif; 
   font-size: 1.5em;
   }

To reduce finger fatigue, this rule can also be written like this:


p {font: italic bold small-caps 1.5em arial, helvetica, sans-serif;}

If you choose the shorthand method for writing font declarations, you must follow these guidelines or browsers may ignore the entire rule.

The shorthand declaration must include values for font-size and font-family, in this order.
If you are including font-weight, font-style or font-variant values, any combination of these three can be written in any order but must be positioned at the beginning of the rule. The font-size then follows.
If you are not including font-weight, font-style or font-variant values, the font-size will be first value in the rule.
Font-family follows in the last position.


p { font: .8em arial, helvetica, sans-serif; }

On the next page we will continue with CSS text properties which typically govern the shape of, and spacing within, blocks of text.