Label space has to be reserved early in the layout
Aliases: label reservation · copy expansion · i18n expansion
What it is
Deciding that icons will carry words, then laying out a grid with no slot for those words, treats type as a sticker to be applied later. A label has width, wrapping, and translation swell. It is a hard volume in the layout. A tab bar, segmented control, or toolbar locked in as icon-only will, when the words arrive, either shove neighbours aside or shrink the type into a fragment nobody can finish reading. Reservation is not polish. It is counting the volume while the structure can still move.
Why it happens
Type swells with language, size, and grammar; a glyph almost never does. German and Finnish routinely run longer than English or Chinese; some languages add inflection to the verb. If the container was sized to the icon's bounding box, the arriving label has three exits: truncate, drop the type size, or burst the container. All three turn a scannable name into an unusable one. A quieter failure is keeping the current grid by moving the standing label onto hover or into an overflow menu — the naming channel is still in the annotation, no longer on the glass. Once early structure treated the volume as zero, every later fix is demolition of a locked layout.
Where it stops holding
- An internal tool that ships in one short-label language and will never be translated can defer the count. A multilingual product cannot.
- A horizontally scrolling tab bar can absorb some swell, but scrolling itself has a discovery cost and is not proof that reservation was enough.
- The icon's own minimum legible size is a separate budget. Enlarging the glyph does not count as leaving room for words.
- This is not about whether labels lift first-try success. It is that words, as objects, need a slot that exists early.
Applying it
- At wireframe stage, drop real, slightly long words from the target languages into the tab bar, segmented control, and sidebar — not the placeholder "Label" — and see which item is squeezed out first.
- Prepare short, typical, and long copy for every icon-bearing nav item. Size the structure so the long slot still stands, not so the pretty short word in the mock stands.
- How to check: swap every intended label into a language known to expand (or pad the strings 30–50%) and capture the actual breakpoint. Truncation, wrapping that blows the height, or a silent fall-back to icon-only means the volume never entered the early structure.
Related
- Same group: F6.02.1 A text label sharply raises recognition and first-use success · F6.02.2 Icon-only works for the few functions with an established consensus
- Nearby: F2.16 Extreme layout values and overflow · F4.10 Truncation and ellipsis
- Search terms:
icon label space·i18n expansion·label reservation