The font-variant CSS property allows rendering small uppercase characters in place of lowercase characters in text. The height of the uppercase characters is the same as the original lowercase. Capital letters are not affected by font-variant.
To make all letters uppercase/lowercase in full height, use the text-transform property.
Browser Support: Full
Small caps are used specially in titles. Some font families provide small-caps characters, used by CSS automatically when the
font-variant: small-caps rule is present. If not, the browser will resize capital letters to the height of lowercase letters.
<h3 class="small-caps"> This is a Title in Small Caps </h3>
This is a Title in Small Caps
Loading a small-caps Font with @font-face
The CSS3 Specification, refering to font small caps glyphs, states:
The availability of these glyphs is based on whether a given feature is defined or not in the feature list of the font.
It later states that the browser may scale down the uppercase glyphs if they are missing. The way browsers implement this in @font-face is still unclear. Some resize upercase glyphs, ignoring a
font-variant: small-caps rule in @font-face. Some use the small glyphs automatically if the font face defines it in its feature list. See
Defining small-caps font-variant with @font-face in Stackoverflow for more information.
font-variant in CSS3
CSS3 totally redefines the font-variant property, making it a shorthand for a ton of new font variants. It is backwards compatible with
font-variant: small-caps rules. However, the new property is not yet supported by most browsers. Some of the values/features that will be added are:
- all-small-caps, same as small-caps but will make capital letters small as well.
- petite-caps, a type of small cap which is even smaller.
- subscripts and superscripts.
- ligatures or combined glyphs.
- control over numerical forms like fractions and ordinal numbers