Capitals, italics and the cost of emphasis

Why all-caps is slow to read

A word in lowercase has a distinctive outline: ascenders sticking up, descenders hanging down, a profile you can partly recognise before resolving the letters. Set the same word in capitals and the outline becomes a rectangle. Every word becomes the same shape, differing only in length.

Classic reading studies found continuous text in capitals to be read measurably more slowly than the same text in mixed case — the figures vary with the method, commonly in the region of 10 to 20 per cent. For a one- or two-word label the effect is negligible, because you are recognising a short known string rather than reading. For a paragraph it is real, and for a long headline it is enough to notice.

The practical division:

• Fine in caps: buttons, short labels, table headers, a two-word eyebrow above a headline, an acronym.
• Avoid caps: sentences, long headlines, anything over about four words, and any body text at all.

Set caps with CSS, not with the caps lock key

If a label should display as uppercase, write it in sentence case and transform it:

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; }

This matters for three practical reasons. The underlying text stays readable when somebody searches it or copies it. Some screen readers pronounce a string of capitals letter by letter, so a genuinely uppercase word can be read out as individual letters. And you can change the decision later without editing the content.

The same applies to small capitals. Use font-variant-caps: small-caps — or all-small-caps for a string that is already uppercase — rather than setting capitals at a smaller size. Real small caps are drawn with the correct stroke weight; scaled-down capitals are visibly thinner than the text around them, which is why faked small caps always look slightly wrong.

Real italics, and fake ones

A true italic is a separate design. The letters have a different skeleton — a single-storey a, a cursive f with a descender, entry and exit strokes that imply a pen. A true oblique, in some sans families, is a deliberately redrawn slanted roman.

What you get when the italic file is missing is neither: the renderer shears the roman outlines by a fixed angle. Circles become ellipses on a slant, stems thicken inconsistently, and the result looks cheap in a way readers notice without diagnosing.

This is why the earlier checklist asks whether a family has italics. If it does not, use weight or colour for emphasis instead of asking the software to invent a style.

An emphasis ladder

Emphasis inside running text has a natural order, from lightest to heaviest:

1. Italic. Almost invisible in the texture of the paragraph until you reach it. The correct default for a title, a term being introduced, or a word carrying stress.
2. Bold. Visible from across the room, which means it changes the typographic colour of the whole block. Correct for a term a scanning reader is hunting for; wrong for stress inside a sentence.
3. Colour. Strong, and on the web it collides with the convention that coloured text is a link.
4. Background highlight. Loudest, and best reserved for search results or a genuine marker.

The rule is the same as the emphasis budget from the first block: use the weakest device that does the job. A sentence with a bold word, an italic word and a coloured word in it has three levels of emphasis and therefore none.

Underline deserves its own line: on the web, reserve it for links. An underlined non-link is tried constantly and produces a stream of failed clicks. In print, underlining is a typewriter convention that italics replaced, and it damages descenders.

The combination that always looks wrong

Bold, italic, underlined, in colour, in capitals, all at once. This appears in almost every first design, and the reason it looks bad is not that the individual devices are bad. It is that five channels stacked on one word tell the reader that the author could not decide which mattered, and the word is now so loud that the sentence around it stops existing.

One channel, at full strength, is the correct answer nearly every time.

A note on emphasis in other scripts

Italic is a Latin convention with a specific history. Devanagari has no italic tradition, and slanting it produces something that reads as a distortion rather than as emphasis. CJK typography does not italicise either; emphasis is conventionally marked with a heavier weight, or with emphasis dots set beside or above the characters, which CSS supports as text-emphasis.

If your content is multilingual, an emphasis rule written as make it italic will quietly produce nonsense in half your languages. Weight and colour transfer across scripts; slant does not.