The CSS font-variant example

Font-variant is very rarely used. I have never used it myself. What it does is that it select the small-caps variant of the font specified. In effect it makes everything uppercase but it's at the same height as a normal letter. For example:

I think it's best used as heading in the sidebar, etc. Here's the spec:

Value:       normal | small-caps | inherit
Initial:       normal
Applies to:       all elements
Inherited:       yes
Percentages:       N/A
Media:       visual
Computed value:     as specified

Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS 2.1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.

Take care!
Tjorriemorrie