Proper Use and Examples of the small-caps CSS Property

Okay, the other day I was trying to use font-variant: small-caps and I could not get it to work. This sent me off on a wild goose chase of sorts because, as it turns out, I was also using text-transform: uppercase. Needless to say, the two don’t work together as text-transform: uppercase seems to override font-variant: small-caps in every browser I tried.

But, I noticed that I could not find any examples of what it looks like and what fonts it works with. So, I decided to do a blog post about it. Below, you will find several examples of this property in use with the basic web fonts.

Arial normally
Arial in small caps

Verdana normally
Verdana in small caps

Times New Roman normally
Times New Roman in small caps

Georgia normally
Georgia in small caps

One thing that you notice that it only capitalizes the letters that are already capitalized. For some reason, I thought that it capitalized the first letter in every word.

So there you go. It does work with basic web fonts Arial, Verdana, Times New Roman and Georgia. Do you have any more examples of which fonts this will work with?