Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS font-variant-caps property

The font-variant-caps property in CSS is identified for controlling the use of alternate glyphs for the capital letters. When a particular font involves capital letter glyphs of multiple different sizes, this property selects the most appropriate ones among them. Fonts also sometimes involve special glyphs for various caseless characters like punctuation marks. But the small capital glyphs are not synthesized for the careless characters. This property is specified using a single keyword value.

Syntax for font-variant-caps property:

Following is the syntax for the font-variant-caps property.

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

Example: CSS font-variant-caps property

Here in the example below, we are using the font-variant-caps property with different border styles, colors, and their different values. In this case, we have given the font-variant-caps property value as small-caps and normal. Hence, the text or the paragraph gets designed with the text style having small capital letters and normal capital letters.

<!DOCTYPE html>
<html>

<head>
	<title>The font-variant-caps property in CSS</title>
	<style type="text/css">
		.small-caps {
		  font-variant-caps: small-caps;
		  font-style: italic;
		  color: red;
		}
		.normal {
		  font-variant-caps: normal;
		  font-style: italic;
		  color: purple;
		}
	</style>
</head>

<body>
	<p class="small-caps">Study Tonight rocks, small caps!</p>
	<p class="normal">Study Tonight rocks, normal caps!</p>
</body>

</html>

Output:

Example 2: CSS font-variant-caps property

Here in the example below, we are using the font-variant-caps property with different border styles, colours and their different values. In this case, we have given the font-variant-caps property value as unicase. So, the letters get designed in the way of unicase i.e; only one letter gets in the capital letter form while others remain as it is.

<!DOCTYPE html>
<html>

<head>
	<title>The font-variant-caps property in CSS</title>
	<style type="text/css">
		.small-caps {
		  font-variant-caps: unicase;
		  font-style: italic;
		  color: red;
		}
		.normal {
		  font-variant-caps: unicase;
		  font-style: italic;
		  color: purple;
		}
	</style>
</head>

<body>
	<p class="small-caps">Study Tonight rocks, unicase caps!</p>
	<p class="normal">Study Tonight rocks, unicase caps!</p>
</body>

</html>

Output:

Live Example

Here in this live example, you can test the code and execute the example using different values or even edit the code example.

Browser Compatibility

There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 52 52
Edge 79 79
Firefox 34 34
Internet Explorer no no
Opera 39 39
Safari no no
Webview Android 52 52
Chrome Android 52 52
Firefox Android 34 34
Opera Android 41 41
IOS Safari no no
Samsung Internet 6.0 6.0

Conclusion

The initial value for the font-variant-caps property is normal. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.