1.4.12 Text Spacing
This document gives information about the related Acquia Optimize checks:
No loss of content or functionality occurs when changing certain text style properties.
Users must have the ability to modify the spacing of text, lines, and paragraphs while still being able to read and interact with all the content. It is not required for your website to provide functionality to modify text properties.
However, if the user wishes to use their own tools to adjust text properties for better readability, your content must not hinder the user in doing so.
Adjusting the spacing between lines, words and letters can be beneficial for individuals with low vision, dyslexia, and other cognitive disabilities. By increasing the space between these elements, it becomes easier for such users to read and comprehend the content.
Certain users might utilize personalized style sheets or other tools to modify text properties for enhanced legibility. These users will have a higher likelihood of effectively accessing your content if it can adapt to these adjustments in text properties.
Sight impairments: Who can better see and read the text with extra spacing.
Reading difficulties: Can achieve improved reading speed when space is added between words or lines.
Alex is a dyslexic individual in his mid-20s.
He has completed a degree in graphic design and works as a freelancer, taking up projects from various clients. Alex is highly creative and has a keen eye for design, but he faces certain challenges related to his dyslexia while working online.
"I find it challenging when I'm reviewing a customer's website text and it doesn't adapt well. It makes it difficult for me to understand the text and do my job in the best possible way. I strive to provide exceptional design work, but without clear and accessible text, it becomes a struggle to fully grasp the message and convey it effectively through my designs."
This section gives some examples of the issue.
A website article with extra spacing for improved readability.
A website article where the heading of the article “How to make the perfect espresso” is cut off as it gets hidden behind the background of the body text.
A website article where the heading of the article “How to make the perfect espresso” overlaps with the body text, making it very difficult to read.
In this review, you must check that your page adapts well to changes in 4 specific text style properties. The four changes are:
Line height (line spacing) to at least 1.5 times the font size.
Spacing after paragraphs to at least 2 times the font size.
Letter spacing (tracking) to at least 0.12 times the font size.
Word spacing to at least 0.16 times the font size.
Tip! You can use the tool Text Spacing Bookmarklet, which modifies the four text properties for your page, so you can easily review the changes to ensure the expected result.
The Text Spacing bookmarklet is a simple tool you can save as a bookmark in your browser.
Add the Text Spacing Bookmarklet to your browser. Find instructions for the Text Spacing Bookmarklet here.
Go to the page you want to review and click the bookmark for the “Text Spacing Bookmarklet” in your browsers bookmark menu. This will adjust the text styling properties for your page. Review that:
You get more spacing between letters, words, lines, and after paragraphs.
You do not get overlapping content or other issues that cause loss of functionality or content.
Click the bookmark again to toggle the text style adjustments off.
Sometimes, on a webpage, certain areas have limits on how much text they can display due to their design. This limitation can be due to factors such as the width of a navigation bar or the column headers of a table.
When the text exceeds the available space, it is common to replace the excess text with three dots (ellipsis). This practice is acceptable as long as there is a way for the user to reveal the full text, such as by focusing on or activating the element.
To fix issues it is recommended to:
Make a design decision for how the layout will adapt.
Follow principles of responsive design
Use the CSS unit “rem” for text sizes.
Avoid fixed sizing of container elements.
Front-end Development: To fix the issues.
Visual Design: To decide how layout adapts to changes.
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Oct 30 2024 03:15:18 GMT+0000 (Coordinated Universal Time)