Text Resize

Description

Individuals with low vision need larger text to improve their reading experience. When text is scaled up to 200 percent, the layout constraints may cause content to overlap or multiple scrollbars appear, compromising the usability and readability of the content.

This is mostly controlled by implementation, but is good for designers to bear in mind layouts can successfully double the text in size. While supporting this requirement, ensure responsive resizing of the scaled text. Intentional information design can help improve readability and affordance at different sizes.

Text Recommendations

When text is enlarged, the reading experience may be impacted. Here are a few things to keep in mind:

• Leave enough space for localization
• Wrap text when necessary
• Collapse elements into things like dropdown lists, popover, etc.
• Text truncation

Design Specification Checklist

Designing screens at different breakpoints help us visualize information layout and hierarchy. Without a design at different breakpoints, defining elements and wrapping behaviour of information is useful to know what information should wrap together as the screen width is reduced.

1. Are the page elements defined?

Defining the information hierarchy helps identify where the group of elements begin to wrap once it hits the marginal padding of its container.

2. Does the wrapping behavior follow the reading order?

Care should be taken to wrap the elements in the same logic as the reading order.