Font Sizing
Must
Section 508:
- §1194.21(b)
- §1194.31(b)
WCAG 2.0:
- 1.4.4
Users must be able to control font size
Developers must ensure that users can change the font size of on-screen text without loss of content or functionality. When text cannot be resized, users who have low vision or cognitive impairments may be unable to read content due to text size. This guideline requires that developers:
- Allow users to modify the font size of the application.
- Support font size settings available in the OS.
- Ensure that the application respects the modified font size across all screens.
- Ensure that resized text properly re-flows on the screen.
- If needed, provide scrolling functionality for any on-screen text that, when re-sized, would be hidden from view.
- Ensure that assistive technology that enlarges text is supported and all application functionality is available and screens are displayed correctly
iOS
As an optional guideline, font re-sizing functionality should be provided via a standard on-screen component that is part of the OS's accessibility settings component group. The iOS provided "Large Text" feature is not available to app developers thus requiring developers to provide an in-app method for setting text size.
iOS Example
// Text elements are rendered using the default font size or larger. // Options are provided to enlarge fonts // Application support font enlargement or screen magnification assistive technologies
iOS Failure
// Text that when enlarged using assistive technologies is unreadable or displayed incorrectly // Functionality is disrupted due to gesture or input conflicts with the assistive technology
Android
Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.
Android Example
// Text elements are rendered using the default font size or larger. // Options are provided to enlarge fonts // Application support font enlargement or screen magnification assistive technologies
Android Failure
// Text that when enlarged using assistive technologies is unreadable or displayed incorrectly // Functionality is disrupted due to gesture or input conflicts with the assistive technology
HTML
Absolute sizing dimensions should not be utilized to specify font size. When absolute font sizes are used, users may not be able to increase or decrease the size of the font or the font may become unreadable or overlap other content. Declaring font sizes in relative units will not only allow the user to increase or decrease the font size but will also automatically display in a size relative to their existing browser settings.
HTML Example
h2 { font-size: 2em; } h2 { font-size: large; }
HTML Failure
h2 { font-size: 12pt; } h2 { font-size: 12px; }
Remediating
Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally, assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.
- Allow users to modify the font size of the application.
- Support font size settings available in the OS.
- Ensure that the application respects the modified font size across all screens
- Ensure that resized text properly re-flows on the screen
- If needed, provide scrolling functionality for any on-screen text that, when re-sized, would be hidden from view.
- Ensure that assistive technology that enlarges text is supported and all application functionality is available and screens are displayed correctly.
Note: As an optional guideline, font re-sizing functionality should be provided via a standard on-screen component that is part of the OS's accessibility settings component group.
Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.
Testing
Recommended tool/method: Manual
Provide for user control of font size (Manual)
- Determine whether there is an option to change the font size of the device
- Determine if the option to change text size properly changes text size
- If the option is provided or if the application provides adjustable font sizes:
- Verify that it remains applied across all screens
- Verify that resized text properly reflows on the screen
- Verify that any elements that now require scrolling provide scrolling options
- Verify that screen magnification works correctly with the application and all screens are readable