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
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
or, if you actually want your site to work on non-Firefox browsers
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
<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.