Proper Use and Examples of the small-caps CSS Property
April 1st, 2007 by Jonathan KempOkay, 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?
Related Posts:
- Nowrap for CSS
- Simulating Position Fixed in IE
- Correctly Setting Z-index
- Creating Accessible Cross-browser Compatible Forms
- CSS Validation
May 17th, 2007 at 10:45 am
When using small-caps I generally add a letter-spacing: 1px or so to the element. Small cap text is usually cramped and giving the letters a little breathing room helps the eye.
August 30th, 2007 at 9:49 am
Watch out for fake small caps. They attract undue emphasis and decrease legibility because the stroke weights are all screwed up, as are the kerns. This is the case in all of the examples that you’ve given (though Verdana is vaguely passable for on-screen viewing).
The small-caps variant simply doesn’t work well if the font designer didn’t include a properly proportioned small-caps variant.
I think that text-transform:uppercase SHOULD override small-caps, because that’s what you telling it do, right? Small caps letters don’t come from the upper case, but from a supplementary lower case. ‘Upper case’ is not synonymous with ‘capitals’.