CSS font-variant-caps Property


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

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

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  

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontVariant property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.