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!


  • 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.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: