Using Small Caps

Many fonts have a corresponding small caps variant that includes uppercase versions of the letters proportionately reduced to small caps size. You can call up the small caps variant with the font-variant property.

To use a small caps font:

Type font-variant: small-caps.

To remove small caps:

Type font-variant: none.

Figure 10.37. Don’t forget the hyphen in both font-variant and small-caps!

✓ Tips

  • Small caps are not quite as heavy as uppercase letters that have been simply reduced in size.

  • Not all fonts have a corresponding small caps design. If the browser can’t find such a design, it has a few choices. It can fake small caps ...

Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial