Use responsive text sizing to create an accessible viewing experience.
Browsers provide a built-in way for site visitors to adjust the base text size for websites, zoom in to content, and enlarge sites to a more comfortable viewing size. However, text styled in pixel (px) units ignore the browser’s text size setting, preventing site visitors from enlarging text for more comfortable reading and creating a poor user experience. Adding a viewport meta tag with the values user-scalable=no or maximum-scale=1.0 can also prevent users from zooming in to view content.
To create an accessible reading experience, use root ems (rem) units for text size. Rems are relative to the base text size defined by the site visitor and respect the site visitor’s browser preferences.
Best practices
Don’t:
- Style text size with pixel (px) units
- Add the
user-scalable or maximum-scale values to the viewport meta tag
Do:
WCAG Reference: Success Criterion 1.4.4: Resize Text