Tracking set too tight on uppercase text-transform CSS

Question

You have a bunch of CSS elements that include:

text-transform: uppercase

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:

Low­er­case let­ters don’t or­di­nar­ily need let­terspac­ing. Nor do cap­i­tal let­ters when they ap­pear at the be­gin­ning of a word or sen­tence, be­cause they’re de­signed to fit cor­rectly next to low­er­case let­ters. But when you use cap­i­tal let­ters to­gether, that spac­ing looks too tight.

That’s why you al­ways add 5–12% ex­tra let­terspac­ing to text in all caps or small caps, par­tic­u­larly at small sizes.

• If you use para­graph and char­ac­ter styles to make a style with all caps or small caps, in­clude let­terspac­ing 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 letter-spacing property.

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.