What Is Text Resizing?
Text resizing refers to the ability of users to adjust the font size on a website or application, either through browser zoom, operating system settings, or assistive technology. It is a key component of accessibility, ensuring readability, user control, and support for users with low vision, reading difficulties, or age-related impairments.
Example: A user increases browser zoom to 150%, and all text remains readable, with no content cut off or overlapped.
Why Text Resizing Matters in Web Accessibility
Text that cannot be resized creates a barrier to access, especially for users who rely on larger fonts for clarity. Resizing helps improve legibility, reduces eye strain, and supports better user experience.
According to WCAG 2.1 (Success Criterion 1.4.4):
“Text must be resizable up to 200% without loss of content or functionality.”
Accessibility laws such as the ADA (U.S.) and BFSG (Germany) require adherence to these guidelines, making text resizing a legal and ethical responsibility.
How to Support Browser Zoom & Resizing
To ensure compatibility with text resizing and zoom tools, your layout should be fluid and flexible:
✅ Use Relative CSS Units
Use em, rem, or % instead of px for fonts and spacing.
✔️ Example:
body {
font-size: 1rem;
}
h1 {
font-size: 2.25rem;
}
✅ Avoid Fixed Heights or Widths for Content
- Let containers expand naturally as text grows.
❌ height: 200px;
✔️ Use min-height or auto for flexibility.
✅ Use max-width instead of absolute widths
- Ensures text wraps properly and doesn’t overflow at larger sizes.
Practical Tips for TYPO3, WordPress & UI Design
TYPO3 Tips:
- Use Fluid templates with relative units.
- Test page layouts at 200% zoom using browser dev tools.
- Ensure no clipping in backend-managed content blocks.
WordPress Tips:
- Choose themes that follow accessibility-ready principles.
- Avoid visual builder plugins that set fixed pixel heights.
- Test text scaling with plugins like “Zoom Accessibility” or default OS settings.
General UI/UX Tips:
- ✅ Ensure buttons and inputs scale proportionally with text.
- ✅ Maintain sufficient line height and padding for readability.
- ✅ Provide font scaling options if possible (e.g., accessibility toolbar with font-size toggle).
Common Mistakes & Fixes
❌ Using px for fonts and layout
✔️ Fix: Use rem or em for scalability and accessibility.
❌ Fixed container sizes that break the layout on zoom
✔️ Fix: Use flexible widths and auto-heights.
❌ Overflowing text or cut-off content at 150–200% zoom
✔️ Fix: Use a responsive design and test across zoom levels.
Explore related terms: Screen Magnifier, Color Contrast, Web Accessibility, WCAG, Semantic HTML
Key Takeaway
Text resizing is about respecting user preferences and needs.
If your content breaks when zoomed, it breaks your user experience. By designing for flexible, scalable typography, you support readability, inclusion, and compliance, all in one.
Want to Make Your Typography Zoom-Friendly?
Run a test with the T3AA Accessibility Analyzer or grab our Text Resizing Checklist for Developers.
Make text scalable. Design with clarity. Empower every reader.