CSS Font Variant

The font-variant property in CSS is used to specify the variant of the font. This property allows you to control the presentation of text in various stylistic and typographic variants.

Font Variant Values

The font-variant property can take several values. Here are the common values you can use:

Value Description Example
normal The default font variant. No special variant applied.
This is normal variant text.
small-caps Displays lowercase letters as small uppercase letters.
This is small-caps variant text.
initial Sets this property to its default value.
This is initial variant text.
inherit Inherits this property from its parent element.
This is inherit variant text.
all-petite-caps Displays all characters in petite caps (smaller uppercase letters).
This is all-petite-caps variant text.
petite-caps Displays lowercase letters as petite caps (smaller uppercase letters).
This is petite-caps variant text.
unicase Displays text in a single case, either all uppercase or all lowercase, depending on the font used.
This is unicase variant text.
titling-caps Displays text in titling caps, which are uppercase letters designed for use in titles.
This is titling-caps variant text.

Using Font Variant in CSS

Here's how you can apply different font variants to your text using CSS:

Example: Applying Normal Variant
Try yourself 
        
            .normal {
    font-variant: normal;
}

This will render the text with the normal font variant, which is the default.

Example: Applying Small-Caps Variant
Try yourself 
        
            .small-caps {
    font-variant: small-caps;
}

This will render the text with the small-caps font variant.

Example: Applying All-Petite-Caps Variant
Try yourself 
        
            .all-petite-caps {
    font-variant: all-petite-caps;
}

This will render the text with the all-petite-caps font variant.

Example: Applying Petite-Caps Variant
Try yourself 
        
            .petite-caps {
    font-variant: petite-caps;
}

This will render the text with the petite-caps font variant.

Example: Applying Unicase Variant
Try yourself 
        
            .unicase {
    font-variant: unicase;
}

This will render the text with the unicase font variant.

Example: Applying Titling-Caps Variant
Try yourself 
        
            .titling-caps {
    font-variant: titling-caps;
}

This will render the text with the titling-caps font variant.

Important Notes

Here are some important notes and best practices when using the font-variant property:

Comparing Font Variants

Here is a visual comparison of different font variants to help you understand their impact:

Normal
Small-Caps
All-Petite-Caps
Petite-Caps
Unicase
Titling-Caps