F4.09.2reflowdesign

Enlarged type must reflow, not clip

Aliases: text wrap on scale · clip on enlarge · overflow hidden

What it is

Once type has grown with the user’s setting, a sentence that fitted one line no longer does. There are two honest next moves: wrap the overflow onto the next line and let the box grow — reflow — or cut the glyphs at the box edge and put an ellipsis in their place — clip. Under Dynamic Type, clipping is pretending the layout was undisturbed by losing content. The point of enlarging was to finish the words. Cutting them cancels the point.

Clipping as a deliberate omission belongs to another group. This is only: when type lengthens because the user asked it to, the default move has to be reflow, not a cut.

Why it happens

Size up, characters per line down, line count up. That is the same passage wrapping under a new measure, the same geometry as a narrower window. If the layout lets height grow with content, wrapping is a few more lines and the information is still there. If the layout treats overflow as an error to hide — overflow: hidden, single-line ellipsis, a crop at a fixed line count — the extra words enter a region that cannot be seen. The user enlarged type on purpose and now sees less. Setting and outcome have opposite signs.

Reflow changes the page’s vertical rhythm: cards taller, lists longer, fewer blocks per screen. That is not a side effect. It is the shape of enlargement actually being carried out. Suppressing that shape (cutting copy so “four cards still fit”) picks neatness over reading, and takes the choice out of the user’s hands.

Some clips also lie to assistive technology: ellipsis on screen, full text spoken, or the reverse. That is how clipping is exposed. At the Dynamic Type layer the earlier question is: enlargement should not have reached clipping at all.

Where it stops holding

Nav titles, very narrow table columns, counts in badges physically cannot host a full sentence; reflow would take the component apart. Omission there comes with the component type, and needs another door to the full text — it is not a precedent that “enlargement may cut.” Labels in motion, short names on map pins, conflict with movement or anchors if they wrap, and need their own design. When the user turns type down and a line suddenly holds more, reflow happens too (fewer lines). Do not wrap only on the enlarge path and leave large empty bands on the shrink path as “design.”

Applying it

  • Readable sentences, captions, and list rows wrap to multiple lines by default, height with content. Do not turn on single-line ellipsis on those elements to “keep the row count.”
  • Treat hidden overflow and ellipsis as off-limits when type has enlarged, unless the component is already a short slot that works by omission and has another door to the full string.
  • Accept fewer cards on one screen. Digest the extra height by scrolling, not by cutting words.
  • Turn the system size up and see whether a sentence that was complete is still complete. An ellipsis, a half glyph, or a horizontal drag to finish the line means enlargement was answered with a clip.

Related

  • Same group: F4.09.1 The user's type size setting has to be honoured · F4.09.3 Fixed-height containers collide with Dynamic Type
  • Nearby: F4.10 Truncation and ellipsis · F4.16 Dynamic Type and user size
  • Search terms: reflow · Dynamic Type · text wrap · overflow

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F4.09.2