CSS font-variant

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.

font-variant: normal|small-caps
font-variant: small-caps;

Browser Support: Full

CSS small-caps

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.small-caps {
font-variant: small-caps;

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

Useful Resources

One comment

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>