CSS font-variant Property

The font-variant property displays text in small-caps font.

Small caps are uppercase letters, but in a smaller font size.

Example

#

Text with 2 different font variants: normal and small-caps.

This text displays as normal.

This text displays as small-caps.

<p style="font-variant: normal;">
  This text displays as normal.
</p>
<p style="font-variant: small-caps;">
  This text displays as small-caps.
</p>

Syntax

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

Values

#

Value Description
normal Default, displays a normal font
small-caps Displays a small-caps font
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when font-variant support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides