Art, design & a little curiosity
Accessible design ↗

Test text spacing without breaking the interface

Review an arts publication with user-adjusted text spacing, looking for clipping, overlaps, fixed heights, hidden controls, and lost relationships while preserving content rather than forcing one typographic setting.

An imagined tactile collage of contrasting paper, raised textures and letterforms.
Tactile collage / Imagined editorial illustration

Let readers adjust the text presentation

Readers may adjust line, word, letter, and paragraph spacing to make text easier to follow. A publication should not lose information or functionality when those settings change. This check concerns the layout's tolerance of user preferences, rather than prescribing one universally comfortable typographic style or replacing the publication's visual character.

Use defined spacing test conditions

Use the text-spacing adjustments described in the W3C criterion as a defined test condition. Inspect containers that depend on a fixed text height, including navigation, buttons, captions, and cards. Let labels wrap where practical and keep controls recognizable. Do not solve an overflow problem by hiding the extra text that the reader needs. Treat every additional requirement as a question with an owner. Determine whether the requirement comes from a real task, an operational constraint, or a team preference. Keep the first two visible in the design and challenge the third when it creates work. Writing these distinctions next to the sketch prevents a tidy layout from concealing an unresolved service decision or an unexplained restriction.

Inspect labels, captions, and errors

Take an exhibition article with long category labels, image captions, and a booking link. Apply the specified spacing test and inspect the whole page. Add a long workshop title and a multi-line error message. Record any clipped word, overlapping element, or action whose label becomes partly invisible. Use ordinary content rather than a perfect demonstration record. Include one short entry, one unusually long entry, and one entry with missing optional information. Work through the task in the order a newcomer would encounter it. Write down what they can reasonably know at each point. Whenever the sketch requires an explanation from its creator, add the missing cue to the artifact before increasing its visual fidelity.

Repair fixed heights and collisions

If a card uses a fixed height, increased spacing may push essential content outside it. If an icon is positioned over the end of a label, expanded text may collide with it. Resolve the sizing or placement relationship. A smaller font or forced single line can conceal the symptom while undermining the reader's requested adjustment. Avoid solving the failure by asking people to be more careful. Look for an earlier decision the design can clarify, a value it can preserve, or a consequence it can make reversible. If there is an unavoidable limitation, explain it before the affected action and provide a useful next step. The fallback deserves the same attention as the ordinary route through the experience.

Repeat the adaptation check after changes

Review the repaired page under the same spacing conditions and with ordinary settings. Check both reading content and interactive states, because errors and selected labels may be longer than the default examples. Keep the exact test conditions in the record. Passing this check addresses one defined form of adaptation and should sit alongside broader accessibility and readability evaluation.

A worked example

Worked decision

Expanded spacing must not cut off a multi-line session label or push an error message over the action needed to correct it.

References & further reading

Examples and exercises in this guide are original teaching scenarios.

Keep following the thread.

More accessible design ↗

Write alt text for artwork in context

Choose image alternatives by the purpose of an artwork image, its surrounding text, and the reader's task, using concise examples without inventing visual details or replacing needed long descriptions.