Overview
Users can easily change the default font size in their browser. All major desktop web browsers have built-in functionality that enables users to zoom in (Ctrl with the Plus key (+) in most Windows browsers, Command with the Plus key (+) in most Mac browsers). By default, modern browsers preserve the proportions of the page so the content gets larger without changing the layout. However, in some cases users prefer simply enlarging the text, not the entire page, since the latter may require horizontal scrolling which makes reading the page content difficult. Some browsers support this functionality. Also, users can easily change the default font size within their browser preferences, which has the same effect. When users zoom into text or increase their browser's font size, the page content should still be readable.
Avoid Using Images of Text (All)
Whenever possible, use text, not images, to create text content. Images of text lose fidelity when enlarged, which can make the text difficult to read, especially for users with visual impairments. Also, text downloads much faster than images. Instead of using images, try to attain all visual effects using cascading style sheets.
Flexible Presentation (Developers)
Use responsive design to optimize the layout of your page for screens of various sizes. Wherever possible use percentages rather than pixels for sizing and placement. Especially avoid constraining the height of a container that includes text. Let the container grow as needed to accommodate the changing text size.
Testing
The W3C Web Content Accessibility Guidelines defines 200% as the minimum zoom level below which all content should still be readable. Testing your web page or application with 200% zoom is easiest in Firefox. Here’s how:
- Turning on text-only zoom (View > Zoom > Zoom Text Only).
- Zoom in six times using Command + (Mac) or Control + (Windows).
- Explore the page to be sure all content is readable. Watch especially for content that disappears beyond the margins of its container or overlaps with other text.
When using a desktop or notebook-based browser, you can also resize the window to simulate viewing on a small screen.
Check to make sure that the pinch and spread capabilities of phones and tablets still work on your application. This is basic functionality of those devices that should not be broken.
External WCAG References
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.