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.