CSS font-variant-caps attribute

Definition and Usage

The font-variant-caps attribute controls the use of alternative capital letter glyphs.

See also:

CSS Tutorial:CSS Font

CSS Reference Manual:font Attribute

HTML DOM Reference Manual:fontVariant Attribute

Example

Set paragraph to lowercase font:

p.normal {font-variant-caps: normal;}
p.small {font-variant-caps: small-caps;}
p.allsmall {font-variant-caps: all-small-caps;}
p.petite {font-variant-caps: petite-caps;}
p.allpetite {font-variant-caps: all-petite-caps;}
p.unicase {font-variant-caps: unicase;}
p.titling {font-variant-caps: titling-caps;}

Try it yourself

CSS syntax

font-variant-caps: normal|small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps|initial|inherit|unset;

Property value

Value Description
normal Disable the use of alternative fonts.
small-caps Display small caps.
all-small-caps Display both uppercase and lowercase letters as small caps.
petite-caps Display ultra-small caps.
all-petite-caps Display both uppercase and lowercase letters as ultra-small caps.
unicase Allow the use of uppercase letters mixed with lowercase letters.
titling-caps Display initial capital letters.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.
unset

Note:Small caps refer to letters that are in uppercase form but have the same size as lowercase letters.

Technical details

Default value: normal
Inheritance: yes
Animation creation: not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.fontVariantCaps="small-caps"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
52.0 79.0 34.0 not supported 39.0