CSS font-variant

The font-variant property is a shorthand property for a set of properties that provide control over stylistic font features.

In CSS1 and CSS2, the font-variant property's sole purpose was to set text to small caps. In CSS3, while it still allows you to specify small caps, it has been expanded to be a shorthand property for the following new font variant subproperties:

So in CSS3 the font-variant property allows you to specify which font features to enable on a font and how they should work. Most modern font technologies support a variety of font features which change the way the font looks in certain cases. For example you can do things like, enable fancy stylistic capital letters (swash caps), have slashes through your zeros, choose between ranging (full-height) and non-ranging (old-style, or lower-case) digits, control of glyph substitution and sizing in East Asian text, and more.

Not all font features will necessarily be available to you all the time. Some font features are applicable only to certain language scripts or specific languages, or in certain writing modes. The font-variant property allows you to enable and/or control specific features as required.

Syntax

CSS2 syntax:

CSS3 syntax:

Possible Values

CSS3 supports font features that are included in the major font formats such as OpenType and Apple Advanced Typography (AAT).

Below are the values defined in CSS3 (including the OpenType feature tag/s where applicable).

normal
Resets all subproperties to their initial value.
none
Sets font-variant-ligatures to none and resets all other font feature properties to their initial value.

Ligatures

These are the possible values for the font-variant-ligatures property. They are grouped under common ligatures, discretionary ligatures, historical ligatures, and contextual alternates.

common-lig-values

Specifies whether common ligatures (OpenType features: liga, clig) are enabled or not. This can be one of the following values:

common-ligatures
Enables display of common ligatures. For OpenType fonts, common ligatures are enabled by default.
no-common-ligatures
Disables display of common ligatures.
discretionary-lig-values

Specifies whether discretionary ligatures (OpenType feature: dlig) are enabled or not. This can be one of the following values:

discretionary-ligatures
Enables display of discretionary ligatures. Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.
no-discretionary-ligatures
Disables display of discretionary ligatures.
historical-lig-values

Specifies whether historical ligatures (OpenType feature: hlig) are enabled or not. This can be one of the following values:

historical-ligatures
Enables display of historical ligatures.
no-historical-ligatures
Disables display of historical ligatures.
contextual-alt-values

Specifies whether contextual alternates are enabled or not (OpenType feature: hlig). This can be one of the following values:

contextual
Enables display of contextual alternates.
no-contextual
Disables display of contextual alternates.

Alternates

These are the possible values for the font-variant-alternates property.

stylistic(feature-value-name)

Enables display of stylistic alternates (font specific, OpenType feature: salt feature-index).

historical-forms

Enables display of historical forms (OpenType feature: hist).

styleset(feature-value-name #)

Enables display with stylistic sets (font specific, OpenType feature: ssfeature-index). For example, ss01, ss02, ss03, etc

character-variant(feature-value-name #)

Enables display of specific character variants (font specific, OpenType feature: cvfeature-index). For example, cv01, cv02, cv03, etc

swash(feature-value-name)

Enables display of swash glyphs (font specific, OpenType feature: swsh feature-index, cswh feature-index).

ornaments(feature-value-name)

Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm feature-index).

annotation(feature-value-name)

Enables display of alternate annotation forms (font specific, OpenType feature: nalt feature-index).

Caps

These are the possible values for the font-variant-caps property.

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.

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.

Numeric

These are the possible values for the font-variant-numeric property.

numeric-figure-values

This can be one of the following values:

lining-nums
Enables display of lining numerals (OpenType feature: lnum).
oldstyle-nums
Enables display of old-style numerals (OpenType feature: onum).
numeric-spacing-values

This can be one of the following values:

proportional-nums
Enables display of proportional numerals (OpenType feature: pnum).
tabular-nums
Enables display of tabular numerals (OpenType feature: tnum).
numeric-fraction-values

This can be one of the following values:

diagonal-fractions
Enables display of lining diagonal fractions (OpenType feature: frac).
stacked-fractions
Enables display of lining stacked fractions (OpenType feature: afrc).
ordinal

Enables display of letter forms used with ordinal numbers (OpenType feature: ordn).

slashed-zero

Enables display of slashed zeros (OpenType feature: zero).

East Asian

These are the possible values for the font-variant-east-asian property.

east-asian-variant-values

This can be one of the following values:

normal
None of the features listed below are enabled.
jis78
Enables rendering of JIS78 forms (OpenType feature: jp78).
jis83
Enables rendering of JIS83 forms (OpenType feature: jis83).
jis90
Enables rendering of JIS90 forms (OpenType feature: jis90).
jis04
Enables rendering of JIS04 forms (OpenType feature: jis04).
simplified
Enables rendering of simplified forms (OpenType feature: smpl).
traditional
Enables rendering of traditional forms (OpenType feature: trad).
east-asian-width-values

This can be one of the following values:

full-width
Enables rendering of full-width variants (OpenType feature: fwid).
proportional-width
Enables rendering of proportionally-spaced variants (OpenType feature: pwid).
ruby

Enables display of ruby variant glyphs (OpenType feature: ruby).

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.

General Information

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

Example Code

Official Specifications