All text on your website can be resized up to 200% without any loss of content or functionality on your website.
What to do:
- Use min height in CSS so that containers increase when text size increase
Resources:
- Text resizing explained (YouTube – 2 min 14 secs)
- Text resize best practices
Plain English Explanation:
You should be able to increase text size on your page by up to 200% without the page display messing up, having text overlap over other text or elements.
Here’s an example where I increased the text size beyond 200% on ADA.gov:
In the top right hand corner, the “Search ADA.gov” search bar is hard to see and you can’t read the text that says “More Search Options” and you can’t even see the “go” button anymore.
Beyond accounting for minimum height with containers in CSS (remember, CSS is code that styles websites), I recommend creating a starting default size of at least 14 point so that users don’t have to zoom or resize text as much as they normally would.
For normal content such as articles, depending on your website, you may want to go to 16 or even 18 point size font just to make things easier on users.
But that’s just a default font recommendation. The key here is that your text can be resized without causing any negative experience for someone using your website.
