How to use the CSS font-variant Property (for small caps)

Learn how to use the CSS font-variant property to use small caps letters for your text — and whether you should use small caps at all.

The CSS font-variant property specifies whether your text display as a normal text case or a small-caps font. The property has three values:

• normal (the default text case)
• inherit
• small-caps

Basic usage:

.small-caps {
  font-variant: small-caps;
}

Before you start using the font-variant property make sure, that you understand what, when, and how to use it correctly (many don’t).

Let’s begin by defining the difference between normal text and small caps:

• Normal text case, also called Sentence case, means regular text like this sentence, where the first letter of the first word in a sentence is capitalized.
• Small caps are short capital letters designed to blend with lowercase letters (using a similar x-height).

Unfortunately, not many web fonts have real small caps.

If you set any of your text to font-variant: small-caps; you will either get:

• Great looking, carefully designed small-caps that smoothly blends in with your normal/sentence case text, like the example you saw earlier 👌
• Fake computer-generated small-caps that don’t blend well with your normal/sentence case text — and make you look unprofessional 😒

Real small caps example

Here’s an example of a real small caps font that perfectly blends in with normal/sentence case:

The reason it works so well in the example above is that the font family used, Alegreya, provides real small caps.

Fake small caps example

Here’s an example of a fake small-caps font:

The example above is also using Alegreya, however I disabled the Alegreya SC font face so you can see how it looks with the fake small caps font.

What determines how your text looks with the font-variant: small-caps is whether your typeface (font family) of choice provides real small caps.

Unfortunately, real small caps are rare. So before you even think about using font-variant: small-caps in your CSS stylesheet, do the following:

1. Research if your typeface has real small-caps (if it has, it’s specified by the typeface designer. Look it up.)
2. If it has, make sure they are enabled correctly.

Otherwise, forget about using this property.