Text Resizing Tips

Tips for making sure users of your website can resize the text without content becoming lost or obscured.

Transcript

Hi I’m Emily from Nomensa, and today I’m going to show you why it’s important to make sure that text on your website can be resized up to 200% without causing content to become lost or obscured.

People with mild visual disabilities may not be able to read the content on a website easily if the text size is too small. For example some people who wear glasses might need to increase the size of the text in order to read the webpage comfortably.

Most browsers allow people to increase or decrease the size of text on a website using built in browser controls. For example, in Firefox, you can press ‘CTRL’ and ‘+’ on your keyboard to adjust the text size of the web page.

Modern browsers also allow you to ‘zoom’ the page, which not only adjusts the size of text but will also adjust the size of other page elements such as images. Bear in mind that not all browsers support ‘zoom’, and even if they do, you cannot guarantee someone will use ‘zoom’ over text resizing.

So it’s important to make sure that when building web pages that the content on your pages can be read easily when the text size is increased.

As a web developer, when building your pages, you should make sure that any containers holding text do not have a fixed ‘height’ on them. If containers have a fixed ‘height’ when someone increases the text size of the page, content on the page may become lost or obscured by other content on the page. In CSS, developers will often set a fixed ‘height’ for containers. Instead they should be using ‘min-height’ rather than ‘height’. Using ‘min-height’ sets a minimum height on a container, which then allows it to increase in height from this point. This means that when someone increases the text size of the page, the container expands along with the text, without any content overlapping, which is exactly what we want.