Font Enlarger

Problem

Users want to view the page in a larger font size

Solution

Allow users to increase/decrease the font size of the text using special controls in the page.

From www.cnn.com

Use when

The users are viewing pages with a lot of prose-like content that they must read. For example on a Article Page. Especially users with reduced eyesight will often find that the default font size is to small for them to read the text comfortably.

How

Provide font size controls next to the text. Either show controls for a specific font size or show controls to increase or decrease the font size.

Why

Although many browsers also support the enlargement of fonts via the View menu and keyboard shortcuts, many people don't know how to use the feature. Having a special control on the page, near the text is a more direct way of doing the same thing.

More Examples

At www.iht.com users can zoom in or out:

http://www.tedco.org/ http://www.harper-adams.ac.uk/accessibility/ http://www.airnorth.com.au www.dell.com

Code examples

Font resizing
JS font resizing

Comments

1 comment has been added to this pattern.

Greg Fields, 4th November 2007

This pattern may need to be updated. The target users for this pattern are primarily those with vision loss or a vision impairment who are not able to read the content effectively due to the text size. For this user type, the enlarged text javascript controls do not help as the control size is as small as the content text ... if not smaller. Further, the image, metadata for the image and the control are not placed in context. This causes screen reader applications used by this target user to provide user actions out of context and almost always increases frequency of error.

A more appropriate facilitation is to leverage relative text sizes for body content and afford users the opportunity to use the User Agent functionality of the market's top browsers that enable text resizing.

For the user with low vision, interaction with a browser-based User Agent is a known procedure that should be leveraged wherever applicable.