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:

Small caps used in regular case sentence
Small caps are often used as an alternative to italic, bold, or all caps.

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:

Notice how these small caps don’t naturally blend in with the regular text case.

Fake small caps. Notice how the font-weight (letter stroke thickness) is off. No designer was involved with this garbage.

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.

Fortunately, the font-variant property will automatically access the OpenType small caps in the font if they exist. However, you still need to import them into your project (just like you import your other fonts). If you don’t, the font-variant property will use the computer-generated garbage small caps as a fallback — which you don’t want.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on