How To Scale Website Fonts Correctly

When your website is visited by someone with a visual disability, it's important that your visitor can adjust the font-size to make it easier to read. It's a fundamental principle of accessibility guidelines.

However, without the proper knowhow and planning, text often vanishes when resized and the page gets usability problems. Here are pointers that will make your site work for all visitors, whether or not they change the text size.

1. Use minimum heights for containers.

The issue you encounter with using fixed heights for containers is that textual information, when enlarged, goes beyond the borders and covers the items below it. To fix this problem, use minimum heights for your containers so that they will increase along with the text, thereby pushing the items below it downward and preventing overlapping.

2. Use dark background colours.

Light-coloured text over a dark background image, when enlarged, will cause it to extend beyond the image. If the background colour is white, the text becomes illegible. An easy way to get around this is to use a dark background colour so that when the text overruns the background image, it will land on a dark background and still be visible.

3. Stay away from horizontal scrolling.

Horizontal scrolling is not favoured by most web users so it is best to avoid using it when the user is resizing text (at least for the first 2-3 resizes). Horizontal scrolling is usually a result of containers having their widths specified in variable units such as em, so that when text increases, the widths also increase.

4. Avoid embedding text within images.

Users cannot resize text embedded within images. When the text is a vital part of the content, don't embed it and try to convert it to real text instead.

5. The visible font-resize tool should be easily available for the user.

Having a visible font resizer for the user rather than letting them do it through their browser is better for you since there is less chance of your page design being altered. A visible font resizer acts by pulling in another stylesheet that stipulates a larger font size or increased dimensions to allow larger text.

Conclusion

It's important to remember that to communicate effectively online you need to make sure your message is not only well written, but also well-presented.

It's so east to create a poor user experience and poor website usability if people find your text-based information slow, awkward or impossible to read - and when that happens you can be sure your website visitors will be heading back to the search engine and off to visit competitor websites that are more accessible and easy to use.