CSS font-variant property allows us to set the text as normal or small-caps from a font family.

This property has been extended in CSS3.

Well, what does small-caps mean?

Let us explain you basicly. When we select small-caps for a text, it makes the lowercase letters to the uppercase letters but these converted letters will be displayed a little smaller than normal uppercase letters. If you didn't understand, don't worry because you will totally understand it in the example.

CSS Syntax

font-variant: normal | small-caps | initial | inherit;

Let's see an example:

<!DOCTYPE html>
        .smallcaps {font-variant: small-caps;}

    <p> Here we used a normal text as you can see.</p>
    <p class="smallcaps">But We Used A Text With Small-Caps Here.</p>


Here the result is:

Property Values

Value Descriptions
normal It means that text characters will be normal. It is the default value of this property.
small-caps When it is set as small-caps, the browser displays a small-caps font.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Related articles