Learn how to tell the difference between fake small caps and real small caps in web typography — and why it matters.
What are small caps?
Small caps are short capital letters that are meant to naturally blend in with lowercase text. They’re commonly used as an alternative to italics, bold, and all caps. Unfortunately, most typefaces don’t have real small caps, that have been designed (with purpose) by the typeface designer.
Okay, so what is fake small caps?
Fake small caps is when you use a word processor or a browser to generate small caps, based on capital letters (uppercase), and reduce their size to something closer to regular lowercase text. Observe and compare the following two examples, and pay attention to their height and stroke width:
Real small caps example:
Fake small caps example:
Notice how these small caps don’t naturally blend in with the regular text case.
It's a staggering difference, huh? Notice how thin the vertical stroke-width is on the fake small caps example. It looks like it’s using a thin font-weight. It’s not, every word above uses a regular font-weight (font-weight:400;). But that’s how most computer-generated small caps look like (trash).
Note: when you use CSS property font-variant: small-caps; it will automatically access the OpenType (real) small caps in your web font — if the font has them. If it doesn’t, you’ll get the usual, undesirable, computer-generated fake small caps.
Just say no to fake small caps
Most word processors and all modern browsers can auto-generate fake small caps by clicking a button or with a single line of code (CSS: font-variant: small-caps;). But that doesn’t mean that you should.
If you want to use capitalized text in your projects as a stylistic choice then I suggest that you either find a font-family (typeface) that has real small caps included or use standard capital letters (CSS: text-transform: uppercase;).
Standard capital letters (all caps) can work if you’re using them for headings, buttons, or other UI elements. But they usually don’t blend in well with regular lowercase text:
Notice how these normal UPPERCASE LETTERS don’t blend in well with the regular lowercase text.
Key take-aways:
- Small caps are an alternative to using italic, bold, and all caps.
- Only use small caps if your typeface/font family of choice has them.
- If you need to use all-caps in your project, and your font doesn’t have real small caps, use standard capital letters.
- The CSS property
font-variant: small-caps;will use real small-caps if they’re available, and default to fake small caps if they’re not (so pay attention when you use this property).
