From CDOT Wiki
Jump to: navigation, search


This property is used to create text composed of capital letters (existing capital letters will be larger than the surrounding small-capped content.) This property will have no effect on language systems that do not use more than one case.


span.sample { font-variant: normal | small-caps }

Legal Values


  • Explicitly sets the value of this property to that of the parent.


  • This value specifies a font that does not use a 'small-capping' effect; all differences in case are displayed as-is using the specified font.


  • This value indicates a 'small-caps' font be used for the current content (content is composed only of capital-case letters.) If such a font is not natively available, the effect should be simulated by the browser using different font sizes.

Mozilla Recommended Values

Usage Examples

Ext/Doc: span.sample { font-variant: small-caps }
In-Line: <span STYLE="font-variant: small-caps">Small Capped Text</span>


Specification Conformance

  • CSS1 Conformance: Content which does have capital/lower-case letter distinctions may ignore this property (treat it as though the value were set to "normal".)

Browser Compatibility

  • Internet Explorer - 4.0-5.5 - This property applies the same uniform font to both lower- and upper-case letters. (Fixed in v6.0)
  • Opear 4.0x only - If a space exists after a letter that is actually capitalized in the content run, the content after it disappears. This behavior hasn't been checked thoroughly, but it definitely happens. It does not occur in 3.5x or in later Opera versions.

See Also