CSS font-variant PropertyS2C Home « CSS font-variant Property


The CSS font-variant property is used to make text appear in small caps.

Applies To

All elements.

Property Values

inherit - The font variant properties are inherited from the parent element.

normal - The font variant is set to normal (default).

small-caps - The font variant is set to small caps.

Default Value

Default value of font-variant is set to normal.


The font-variant property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.


<!DOCTYPE html> 
<!-- Our HTML/CSS for the CSS font-style property follows -->
<html  lang="en">
<title>CSS Reference - CSS font-variant Property</title>

<!-- Valid values for CSS font-variant Property are:
	inherit, normal and small-caps. 

<style type="text/css">

/* Body font style variant to small caps to show inheritance */
body {
  font-variant: small-caps;

/* h1 headings font variant set to normal */
h1 {
  font-variant: normal;

/* h2 headings font variant set to inherit (inherits from parent element) */
h2 {
  font-variant: inherit;

/* Paragraph font variant set to normal */
p {
  font-variant: normal;


<h1>H1 Headings Font Variant will be set to normal</h1>
<h2>H2 Headings Inherit From Body Element So Font Variant Will Be Set To Small Caps</h2>
<p>Paragraph Font Variant will be set to normal.</p>

How It Looks

The results of using the font-variant property with the values above will look something like the following:


go to home page Homepage go to top of page Top