Using Small Caps

Many fonts have a corresponding small caps variant that includes uppercase versions of the letters proportionately reduced to small caps size. You can call up the small caps variant with the font-variant property.

To use a small caps font:

Type font-variant: small-caps.

To remove small caps:

Type font-variant: none.

Figure 10.37. Don't forget the hyphen in both font-variant and small-caps!

Tips

• Small caps are not quite as heavy as uppercase letters that have been simply reduced in size.

• Not all fonts have a corresponding small caps design. If the browser can't find such a design, it has a few choices. It can fake small caps by simply reducing the size of uppercase letters (which tends to make them look a bit squat), it can forget about small caps altogether and display the text in all uppercase (similar to text-transform: uppercase as described on page 166), or, theoretically, it can choose the next font in the list to see if it has a small caps design (though I've never seen this happen).

• The font-variant property is inherited.

Figure 10.38. Small caps vary a tiny bit from browser to browser. From top to bottom, there is Firefox for Windows (which is identical to Internet Explorer 7), Internet Explorer 6, and Opera 8.5 for Windows.