CSS font-variant
The font-variant
property is a shorthand property for all font-variant subproperties. These are the 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:
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
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
tonone
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
).
Position
-
These are the possible values for the
font-variant-position
property.normal
- Specifies that neither subscript variants nor superscript variants are enabled.
sub
- Enables subscript variants (OpenType feature:
subs
). super
- Enables superscript variants (OpenType feature:
sups
).
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
orinitial
, 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
- CSS Fonts Module Level 3 (W3C Recommendation 20 September 2018)
- CSS Level 2.1 (W3C Recommendation 07 June 2011)
- CSS Level 1 (W3C Recommendation 17 Dec 1996)