You have a bunch of CSS elements that include:
But you are not correcting the
letter-spacing at the same time — and under your setup, you need to. That’s because normal letter spacing metrics for a font’s uppercase letters are set up to fit tightly in against lowercase letters right after them.
This affects elements like "Featured On Meta" or "Stack Exchange Network", ones that are normally quite small to read. For example:
Or here, where the way-too-bold Mac version is to the left and the Windows version is to the right:
Notice how unevenly spaced those all are: some pairs clump together while others have greater gaps, and it’s not evenly spaced the way it is supposed to be.
As you can see, those are set badly for all-caps, so they need a bit of letter spacing. This is something that all typographers know to do reflexively, but web programmers with no experience in typesetting or page layout probably do not.
Butterick explains this under his section on letter spacing in his Practical Typography book this way:
Lowercase letters don’t ordinarily need letterspacing. Nor do capital letters when they appear at the beginning of a word or sentence, because they’re designed to fit correctly next to lowercase letters. But when you use capital letters together, that spacing looks too tight.
That’s why you always add 5–12% extra letterspacing to text in all caps or small caps, particularly at small sizes.
- If you use paragraph and character styles to make a style with all caps or small caps, include letterspacing as part of the style definition.
The only time you don’t have to do this is when you are specifically using a type face made for setting only capitals, or when you have used the font’s
smcp variation to access that font’s real small caps. In those cases, correct letter spacing is already baked into the font metrics.
But since you’re using the One Font to Rule Them All™ approach, and the old legacy system fonts you’re using don’t even have any real small capitals, you have to set these up yourself by adjusting the CSS
Whether you use em or px values for it, and just what those values are, will depend on which face you’re setting at which size. You’ll likely want to choose different values depending on the which element you’re transforming.
I’m also not sure why you have both bold and all-caps going at the same time; just one of those two emphasizers would work. But that’s up to you.