{
    "slug": "text_resize_reflow",
    "term": "Text Resize and Reflow",
    "category": "accessibility",
    "difficulty": "intermediate",
    "short": "Ensuring content reflows into a single column and stays usable when users scale text up to 200% or zoom to 400% without horizontal scrolling.",
    "long": "Text resize and reflow covers two distinct WCAG requirements that protect low-vision users who enlarge content. WCAG 1.4.4 Resize Text requires that text can scale up to 200% without loss of content or functionality. WCAG 1.4.10 Reflow requires that at 400% zoom (equivalent to a 320 CSS pixel wide viewport) content reflows into a single column with no need for two-dimensional scrolling, except for content that genuinely needs it like maps or data tables.\n\nThe crucial distinction from responsive design is the trigger. Responsive breakpoints react to viewport width - the device or window size. Text resize is user-initiated font scaling: the user increases the browser's default font size, or uses page zoom, independently of the device. A layout can look perfect at every device breakpoint and still break catastrophically when a user bumps their font up two notches.\n\nThe failure modes are predictable. Fixed-height containers with overflow:hidden clip enlarged text. Pixel-based heights and widths refuse to grow with content. Absolute positioning and fixed line-height crush text together or push it out of view. Layouts built on viewport units (vw) for font sizes ignore the user's preference entirely.\n\nThe fix is to build flow-friendly layouts. Use relative units (rem, em) for font sizes and spacing so they honor the user's base font size. Avoid fixed heights on text containers; let them grow. Use CSS that wraps and reflows - flexbox and grid with min-content awareness, media queries that switch to single column at narrow widths, and overflow handling that allows scroll only on the axis that needs it. Test by setting the browser default font to large and by zooming to 400% at a 1280px window, then confirm no content is clipped and no horizontal scrollbar appears for body text.",
    "aliases": [
        "resize text",
        "reflow",
        "text zoom",
        "200% text scaling"
    ],
    "tags": [
        "accessibility",
        "wcag",
        "responsive-text",
        "low-vision",
        "css",
        "frontend"
    ],
    "misconception": "Building a responsive layout that works at every device breakpoint guarantees text resize compliance - but viewport breakpoints react to screen width, while text resize is a separate user-initiated font scaling that can break a perfectly responsive page.",
    "why_it_matters": "Low-vision users routinely enlarge text 150-200%, and a layout that clips or hides content at that scale becomes unusable for them and fails WCAG 1.4.4 and 1.4.10, exposing the product to legal accessibility complaints.",
    "common_mistakes": [
        "Setting font sizes in px so the browser's default-font-size preference is ignored entirely.",
        "Using fixed-height containers with overflow:hidden that clip text once it grows.",
        "Sizing fonts with viewport units (vw) which scale with the screen, not with the user's resize preference.",
        "Adding maximum-scale=1 or user-scalable=no to the viewport meta tag, blocking pinch-zoom on mobile.",
        "Testing only at device breakpoints and never at 200% text size or 400% page zoom."
    ],
    "when_to_use": [
        "Any text-based web content that low-vision users may need to enlarge, which is essentially all body and UI text.",
        "When building layouts that must pass WCAG 1.4.4 (200% text) and 1.4.10 (400% reflow) for AA conformance.",
        "When supporting mobile users who pinch-zoom or set large system font sizes."
    ],
    "avoid_when": [
        "Content genuinely requires two-dimensional layout to be meaningful, such as maps, complex data tables, or diagrams that WCAG 1.4.10 explicitly exempts.",
        "A print stylesheet where reflow and user font scaling do not apply to the rendered medium."
    ],
    "related": [
        "wcag_guidelines",
        "colour_contrast",
        "reduced_motion",
        "responsive_design"
    ],
    "prerequisites": [
        "wcag_guidelines",
        "responsive_design"
    ],
    "refs": [
        "https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html",
        "https://www.w3.org/WAI/WCAG21/Understanding/reflow.html",
        "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_values_and_units"
    ],
    "bad_code": "/* Fixed pixel sizing ignores user font preference */\n/* and clips enlarged text */\n.card {\n  width: 300px;\n  height: 120px;\n  overflow: hidden;\n}\n.card h2 {\n  font-size: 18px;       /* px - does not honor base font size */\n  line-height: 24px;     /* fixed - text overlaps when scaled */\n}\n.hero-title {\n  font-size: 5vw;        /* scales with viewport, not user zoom */\n}\n\n<meta name=\"viewport\"\n      content=\"width=device-width, maximum-scale=1, user-scalable=no\">\n<!-- Blocks pinch-zoom entirely -->",
    "good_code": "/* Relative units honor the user's base font size; */\n/* containers grow instead of clipping */\n.card {\n  width: 100%;\n  max-width: 20rem;\n  min-height: 7.5rem;    /* min, not fixed - can grow */\n  overflow: visible;\n}\n.card h2 {\n  font-size: 1.125rem;   /* rem scales with root font size */\n  line-height: 1.5;      /* unitless - scales with font-size */\n}\n.hero-title {\n  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);\n}\n@media (max-width: 480px) {\n  .layout { display: block; }  /* reflow to single column */\n}\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<!-- Allows pinch-zoom and page zoom -->",
    "quick_fix": "Set font sizes and spacing in rem/em with unitless line-height, remove fixed heights and overflow:hidden from text containers, and drop any maximum-scale or user-scalable=no from the viewport meta.",
    "severity": "high",
    "effort": "medium",
    "created": "2026-06-09",
    "updated": "2026-06-09",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/text_resize_reflow",
        "html_url": "https://codeclaritylab.com/glossary/text_resize_reflow",
        "json_url": "https://codeclaritylab.com/glossary/text_resize_reflow.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Text Resize and Reflow](https://codeclaritylab.com/glossary/text_resize_reflow) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/text_resize_reflow"
            }
        }
    }
}