UsableTypeTypography for the World Wide Web

style guide

Font Variants

The ability to create font variants in css is a limited but sometimes useful feature. Currently the only possible font variant available is small-caps text, as shown in the following example:

dl {font-variant: small-caps;}

Small-caps text produces an Effect Like This One. Notice that uppercase letters in the source code are displayed at a larger size than lowercase letters; in this example the first letter of each word is in uppercase.

Some fonts provide a small-caps face, but many do not. When one is not available, the user agent/browser will either create the new face by scaling down normal uppercase letters, or simply make all letters uppercase in the normal size, similar to the declaration of text-transform:uppercase;.

Some font families include other font variants, such as old style numerals, condensed, or expanded letters. Currently there is no way of selecting any other variant with CSS other than small caps.

font-variant
Values: small-caps | normal |inherit
Initial Value: normal
Applies to: all elements
Inherited: yes

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close