Font variants

The font-variant property is used to convert the lower case letters into the upper case via a variation called small-caps. The major difference between a regular upper case and the small-caps is that the letter generated is somewhat smaller size upper case then it would have been as a regular within given font family. Beside that the resulting proportions are also slightly changed giving a very stylish look the font.

The font-variant property contains following information:

value: normal, small-caps or inherit;
initial: normal;
applies to: all elements;
inherited: yes;
percentages: N/A;
media: visual;
computed value: as specified.

Example

CSS font-variant property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
p { 
	position:relative; top:40px;
	font-family:"Times New Roman", serif;
	font-variant:normal;
}
p + p { 
	font-family:"Times New Roman", serif;
	font-variant:small-caps;
}
</style>
</head>
<body>

<p>Times New Roman with regular caps looks like this</p>
<p>Times New Roman with small-caps looks like this</p>

</body>
</html>

›› go to examples ››

Example

CSS font-variant property example:

Comments

About

Contact

Get Connected