Real Small Caps on the Web

29 Jan 2016
2 minute read

I’ve read before about the difference between fake and real small caps. Recently, I’ve discovered that I’ve been doing the bad thing all along. For a little bit of background, you can read the rants discussion about small-caps. Essentially, fake small-caps are just a smaller font size of the capital letters. These are bad because they have a much lighter weight than the regular letters, which looks funny.

I was previously under the impression that the correct way to use small-caps on the web was to do

font-variant: small-caps;

EDIT 07/02/2017: The above is actually correct, and the following is misinformed.

but that produces very FAKE small caps.

Looking at one of my previous pages, I discovered that an offending tag was using the fake small-caps. Reading up more on the issue did not give any enlightening solutions. I needed to enable “smcp” on the font, but no method of doing this was described.

Luckily, Wikipedia had the solution. To correctly enable small caps, you should use

font-variant-caps: small-caps;

or, if you actually want your site to work on non-Firefox browsers

font-feature-settings: 'smcp';

and this produces REAL small caps.

Unfortunately, I had to use a different font for the examples, because my main font does not support small caps.

I find it interesting that none of the sites extolling the benefits of true small caps ever gave a solution for the web.

A related note: there is a semantic difference between <strike>, <del>, and <s>. It bears looking up.

EDIT 07/02/2017: As I have now discovered, my original impression for how to use small-caps on the web was correct. The only issue was not using a font that supported them. You should indeed use font-variant, which even produces a nice fallback for when your font does not have the required features.