Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

font-variant (CSS property)

Browser support full matrix
IE5.5+ FF1+ Saf3 Op9.2+
Full Full None Full
Spec
Inherited Initial Version
Yes normal CSS1, 2

Example

This style rule makes h1 headings render with small-caps:

h1 {
  font-variant: small-caps;
}

Try it yourself!View all demos

Description

font-variant sets the font variant that will be used for the text content of an element.

Small-caps fonts are fonts in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

Value

normal
The value normal specifies a font that is not a small-caps font.
small-caps
The value small-caps specifies a font that is a small-caps font. CSS2.1 allows a user agent to use scaled-down versions of uppercase letters in lieu of true small-caps lowercase letters, and even to use ordinary uppercase letters as a replacement.

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3None
2.0None
3.0None
Opera9.2Full
9.5Full

In Internet Explorer for Windows versions up to and including 7, setting font-variant to small-caps causes the values lowercase and uppercase for the text-transform property to behave as if they were set to none. The computed intrinsic height of an inline box will be incorrect for small-caps text if the text consists solely of lowercase letters, and contains no whitespace or punctuation characters.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Safari versions up to and including 3 don’t support this property.

User-contributed notes

ID:
#1
Date:
Sun, 16 Mar 2008 16:42:46 GMT
Contributed by:
Veggie
Status:
This note has not yet been confirmed for accuracy and relevance.

Thank you for pointing out the lack of small-caps support SitePoint! I couldn't find it anywhere else.

Other people may have noticed that Safari has issues with small-caps, and seems to take 70% of the font size for all small-cap characters. A 12 pixel font size results in 8 pixel small caps, which is very difficult to read.

Here is a tip on how to get small-caps looking right in Safari:

Formula for calculating em units:
1 / current font size * desired pixel size = em.

body
{
font-size: 62.5%; /* 10 pixels */
}
a.navLink
{
font-size: 1.2em /* 12 pixels */
font-variant: small-caps;
}
span.smallCaps
{
font-size: 1em /* 10 pixels */;
font-variant: normal;
text-transform: uppercase;
}

<a class="navLink" href="#">A<span class="smallCaps">bout</span></a>

Take a look at it in all major browsers and you'll notice that it remains consistent to normal small-caps in IE/Firefox/Opera, and will actually look good in Safari!

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters