Captions in Typography

In the typography hierarchy, captions represent the smallest font size on a page and are usually smaller than the body text. Captions stand for brief explanations accompanying visual content. They can also include acknowledgments to the author or the copyright holder of a photograph, an image, illustration, graph, etc.

Captions work like anchor points helping users skim the content and catch on to only the most relevant information for them. Apart from that, captions provide extra context to visual content and assist users with visual or cognitive impairments.^[1]

When deciding on the typeface for captions, remember that it should remain legible at very small sizes (6-9 points).

Consider the following criteria:

• Sans serifs are more readable at smaller sizes than serifs
• The typeface should include thin variations that are more readable at smaller sizes
• The typeface has larger x-heights
• The typeface has more open counters
• The typeface has more open letter spacing^[2]

Usually, captions appear quite minimalistic: black or gray text that gets positioned either to the side of or below an image. To add more visual interest, designers use italics and experiment with colors, applying lighter colors on darker backgrounds. Some captions appear as an overlay when hovering a mouse over an image.

When you decide to add more brand personality to captions, keep accessibility in mind. Captions must remain legible and be compatible with WCAG color contrast recommendations. In addition, instead of italics that are considered hard for users with dyslexia, use bold letters for emphasis or contrast.

As far as captions are secondary text, they should be less prominent. On average, captions are around 2 points smaller than the body text to communicate their lesser importance clearly. For example, if the body text is 16px, captions can be 14px. When larger than that, captions can be harder to distinguish from normal text.^[3]

One of the primary goals of captions is to accompany and briefly provide additional information about visual content. It explains why captions should appear below images, photographs, or illustrations. Besides, this way captions don't distract users without visual or cognitive impairments from viewing content.

Captions and alt text are in the same boat: they help users who have trouble viewing images, processing visuals, or use screen readers to access the content. Don't repeat the information that one can get from alt text or an image so that users won't need to hear the same twice.

Complex images that provide a lot of information, like graphs, diagrams, or infographics, have a strong need for captions and extended descriptions that refer to key content and titles.

Any text longer than 2-3 words written in all caps turns into a shouting piece that users have trouble reading and may even lose interest in. Why does this happen?

Many studies have been conducted to explain it. One study suggests that people don't read letter-by-letter but rather recognize ascending and descending words' outlines. All caps doesn't have these variations, making it harder to read longer pieces of writing in all caps.^[4]

No matter which theory you prefer, all caps feel unfamiliar to ordinary people, making text notably hard to digest. Additionally, most screen readers will spell out text in all caps letter by letter, leading to a terrible user experience. It can be okay to use all caps for headlines, subheads, labels, and other short phrases. Captions, however, appear illegible and impose a higher cognitive load.

In turn, in sentence case, letters are more distinctive, and text feels familiar and natural — that's how we have grown up reading, after all.