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.

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.

Using Small Caps

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

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.

Using Small Caps

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

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.

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