All caps

The cost is measurable and the reason is structural. A word in mixed case has a silhouette: ascenders sticking up, descenders hanging down, a ragged outline the eye can match against words it already knows. Set the same word in capitals and every letter becomes the same height, so the outline flattens into a rectangle and the reader has to identify letter by letter. Studies of reading speed have put the penalty in the range of ten percent or more on running text, which is nothing on a four-word label and a great deal on a paragraph.

That is why caps are a label technique. Section headers, table column heads, overline eyebrows above a title, button text in some systems, all short enough that the reader recognises them as a shape rather than reading them. Sentences are where it goes wrong. A caps paragraph is slow, and on the web it also carries the connotation of shouting, borrowed from decades of email and forums. The other thing caps lose is case as information: acronyms stop standing out, proper nouns stop announcing themselves, and a name in the middle of a caps line is invisible.

Caps want more space between letters than lowercase does. Type is spaced for mixed case, where the sidebearings are tuned to how round and straight letters sit beside each other at x-height; capitals are wider, flatter sided, and set at their default spacing they look cramped. Opening the tracking by roughly 5 to 10 percent of the size is the standard correction, and it is what separates a caps label that looks designed from one that looks like a text-transform was added and nobody looked again. Small sizes need more of it than large ones.

Two mechanisms, and they are not equivalent. text-transform: uppercase changes the rendering of lowercase text, so the DOM keeps the original string: search, copy and paste, and translation all still see “Shipping address”, which is almost always what you want. font-variant-caps: all-small-caps and true small caps are a different answer, using capital forms drawn at lowercase height instead of full-height ones. Typing the caps by hand is the option to avoid, since it hard-codes a visual decision into the content and some screen readers spell out all-caps strings letter by letter when they mistake them for acronyms.