B.43. font-variant

This property lets you specify that the current element be rendered with a small-caps version of the font assigned to it. In a small-caps font, the lowercase letters look just like uppercase letters, but smaller.

The Latin alphabet (used by most Western languages) is actually the exception in that it has uppercase and lowercase versions of each letter. Most other writing systems in the world have a single case, and therefore are unaffected by this property.

Inherited: Yes

See also: Section B.37font

B.43.1. Value

normal or small-caps.

Initial value: normal

B.43.2. Compatibility

CSS Version: 1

Supported by most CSS-compatible browsers, with the notable exception of Netscape 4.

Internet Explorer 6 (when not running in standards-compliant mode) and all previous versions for Windows, as well as Internet Explorer 4 for Macintosh, display the small-caps value as all-caps (i.e. all characters in the element are capitalized). Internet Explorer 6 (Windows), in standards-compliant mode, and Internet Explorer 5 for Macintosh, artificially shrink the capitals corresponding to lowercase characters in the text to simulate a small-caps font.

No currently-available browsers will actually use the small-caps variant of a font if one is available.

B.43.3. Example

This style rule displays all headings on the page in small-caps:

h1, h2, h3, h4, h5, h6 {
  font-variant: small-caps;
}