Design Atlas
한국어
◉ Accessibility

Text Resize & Reflow

텍스트 확대·리플로우

The principle that zooming a browser to 200% must not clip text or force horizontal scrolling — content should reflow into a single column.

Also known as: 200% zoomReflow
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">100%</div>
    <div class="cols">
      <div class="col"><div class="h"></div><div class="p"></div><div class="p"></div></div>
      <div class="col"><div class="h"></div><div class="p"></div><div class="p"></div></div>
    </div>
  </div>
  <div class="pane">
    <div class="tag">200% · reflow</div>
    <div class="cols one">
      <div class="col wide"><div class="h"></div><div class="p"></div><div class="p"></div><div class="p"></div></div>
    </div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;padding:10px 8% 8px;gap:8%;overflow:hidden}
.tag{flex:none;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.cols{flex:1;min-height:0;display:flex;gap:8%}
.cols.one{flex-direction:column;gap:10%}
.col{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10%}
.h{height:16%;border-radius:4px;background:var(--fg);opacity:.7;flex:none}
.p{height:12%;border-radius:4px;background:var(--muted);opacity:.3;flex:none}
.wide .h{height:22%}
.wide .p{height:16%}

Low-vision users zoom the browser to 200% with Cmd/Ctrl + '+'. If only the text scales while the layout stays fixed, cards overlap or text gets clipped outside its box — usually caused by a fixed-px width or a text container wrapped in overflow: hidden.

A well-built responsive layout treats zoom as just another narrow viewport: reflow to a single column with no horizontal scroll at an effective 320 CSS px width (1.4.10 Reflow). Separately, 1.4.4 requires that text itself can scale up to 200% without losing content or functionality.

Left is the default 100% two-column layout; right is zoomed to 200% and reflowed into a single column, with every line still fully readable and nothing clipped.

When to use

Before reaching for a fixed-px width or an overflow: hidden text box, actually zoom to 200% and see what happens. Sizing in rem, %, and clamp() prevents most of this by default.