CSS font-variant-caps

<!doctype html>
<title>Example</title>
<style>
  body {
    font-size: 5vw;
  }
  time {
    font-variant-caps: all-small-caps;
  }
</style>

<p>The concert starts at <time>2pm on Saturday, 28 February, 2017</time></p>

The font-variant-caps property allows the selection of alternate glyphs used for small or petite capitals or for titling.

The font-variant-caps property was introduced in CSS3 for the purposes of enabling various font related features that can improve the appearance of the text on the page. It specifically deals with small caps, petite caps, unicase, and titling caps.

In CSS1 and CSS2, small caps were specified with the font-variant property. In CSS3, that property has now become shorthand for some new CSS3 properties (including the font-variant-caps property). The font-variant-caps property expands the small caps usage to include other related glyphs such as petite caps, titling caps, and unicase. So you can use either font-variant or font-variant-caps to specify small caps and the other related glyphs.

Syntax

The syntax of the font-variant-caps property is:

These values are explained in more detail below.

Possible Values

normal

Specifies that none of the features below are enabled.

small-caps

Specifies that the font is rendered in small-caps (OpenType feature: smcp). Small caps typically appear as uppercase letters but in the size of lower case letters.

all-small-caps

Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).

With normal small caps, any uppercase character is rendered at full uppercase size, while lowercase characters are rendered smaller. However, when the all-small-caps keyword is used, those uppercase characters are rendered at the smaller size.

petite-caps

Enables display of petite capitals (OpenType feature: pcap).

If the font doesn't support petite capitals, the property behaves as though small-caps had been specified instead.

Example of small caps and petite caps — Petite caps are smaller than small caps, and are well suited to designs with a small lowercase x-height.

all-petite-caps

Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).

If this keyword is used on a font that doesn't support this feature, the property behaves as though all-small-caps had been specified instead.

unicase

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).

titling-caps

Enables display of titling capitals (OpenType feature: titl).

Titling capitals are a variant of uppercase designed for heading and titles. The stroke width is reduced for use at larger point sizes where the stroke weight used in smaller text sizes would be too heavy.

If this is used on a font that doesn't support this feature, the property has no visible effect.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Resizing vs Purpose Built Glyphs

When you use this property, the user agent will attempt to use the glyphs that have been specifically designed for this purpose. If the font doesn't include a purpose built glyph — a small caps version for example — the user agent will use a normal glyph and resize it accordingly.

However, this resizing process usually provides less than ideal results. When a capital letter is scaled down, the strokes also become thinner. This results in the smaller letters looking slightly different to the larger (normal size) ones. A purpose-built small caps glyph is designed to overcome this issue, and it is therefore made separately to the standard capital letters of a font. The real small caps version will have thicker strokes than a synthetically generated one, which make it look more balanced against the larger capital letters in the font.

General Information

Initial Value: normal
Applies To: All elements
Inherited?: Yes
Media: Visual
Animatable?: No

Example Code

Official Specifications

CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.