Over the past few years, the text resizing tool has become more and more popular on the Web. It is most frequently offered on news sites, which contain a significant amount of text and where reading is the user’s main goal.

This tool does come along with the most popular browsers, bit it is still a very good idea to ensure it is clearly visible on your sites; this is a tool that can be very handy for people with difficulty reading.

You may have noticed that there currently aren’t any standards on how to indicate this tool’s availability. Just take a look at a few pages in different languages and you’ll see how many different formats are used.

When choosing an appropriate icon for this tool and determining how it will behave, designers should consider these four essential points:

1) The nature, needs and characteristics of target clients:
The purpose of offering the text resizing function is to make it easier for users to read content. People who don’t have perfect vision may have a hard time reading on-screen text. The types of pathologies vary, from common far-sightedness caused by aging, to more serious vision problems like peripheral or tunnel vision. So just how useful can this function be to readers? Well, people with tunnel vision would need to reduce the text size to something around 5 or 6 points, while those with peripheral vision difficulties might need to increase text size by as much as 500%. Sites that are really designed for the visually impaired will provide infinite increases and reductions in text size, while also allowing the user to change background and text colour. Most websites that offer this function are aimed at people who only need to increase text size a little bit; not at the visually impaired. It is therefore essential that you understand your potential users’ needs.

2) Icons and behaviour:
Depending on the need, the tool should increase or decrease text size as easily as possible. If the number of changes is limited to a few predetermined sizes, we recommend not using (+) and (-) buttons. Letters do a better job of representing the number of increases and decreases possible. As with any other function offered on your site, the results of using this function, as well as its limits, should be absolutely clear.

Here are a few examples:

This option provides some feedback showing that one of the items has been selected.

In this case, the feedback is a little ambiguous: was the little A selected (blue background) or the big A (bold)?

Which A was selected? These options aren’t clear enough.

This option may leave your user asking where to click and which elements have already been selected.

This style should be used when there are no limits to resizing text. In this case, the (+) symbol should always appear on the right-hand side, which will serve as a reminder of real-world devices where, for example, the user can raise or lower the volume.

These options are the most difficult to understand.

3) Affordance and Feedback:
Whichever style you choose, the user must know where to click. Icons, letters and images should be sufficiently inviting or “affordant”, as with clickable buttons. Some styles will only offer one option (one increase and one decrease), while others may offer a variety of sizes. This underlines the need for effective feedback; a mechanism which indicates the text’s current state. The user should also be “invited” to restore defaults.

4) Localization:
Localization is another reading aid that should be clearly visible on the page. The user should be able to spot it immediately.

It is generally true that people with visual impairments are likely to have already installed visual assistance software, but is that a good reason to not prepare for the need?

To sum up, even if there are no standards, we recommend that designers think carefully about the type of model to use. Every situation is different and design choices must always be justified.

PS: thanks to Joëlle and Chrystel for their contributions to this article.