CSS font-variant-caps Property

❮ Previous Complete CSS Reference Next ❯

Example

Set a paragraph to a small-caps 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 »

Definition and Usage

The font-variant-caps property controls the usage of alternate glyphs for capital letters.

Show demo ❯

Default value:	normal
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.fontVariantCaps="small-caps"

Browser Support

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

Property
font-variant-caps	52.0	79.0	34.0	Not supported	39.0

CSS Syntax

Property Values

Value	Description	Demo
normal	Deactivates the use of alternate glyphs	Demo ❯
small-caps	Displays small capitals	Demo ❯
all-small-caps	Displays small capitals for both upper and lowercase letters	Demo ❯
petite-caps	Displays petite capitals	Demo ❯
all-petite-caps	Displays petite capitals for both upper and lowercase letters	Demo ❯
unicase	Displays a mix of small capitals for uppercase letters with normal lowercase letters	Demo ❯
titling-caps	Displays titling capitals	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit
unset

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontVariant property