Text Spacing
Overview
Some users will want to adjust the text style of your content so that they can read it better. They may increase the font size, the line height, letter spacing, etc. This means that they will need to override the text style that you’ve already set yourself and you need to allow that.
Readability
In order to make your text more readable, these are the suggested text properties to apply:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following 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.
It has been objected that justice is honesty in the sense of Glaucon and Adeimantus, but is taken by Socrates to mean all virtue. May we not more truly say that the old-fashioned notion of justice is enlarged by Socrates, and becomes equivalent to universal order or well-being, first in the State, and secondly in the individual?
He has found a new answer to his old question (Protag.), ‘whether the virtues are one or many,’ viz. that one is the ordering principle of the three others.
p {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.02em;
}Overriding Text Styles
As mentioned before, some users will override the text styles that you already have in place, in order for them to read better. In such a case, you must allow your text to be adjustable for the user. When adjusted by the user, your text should not become problematic. Some examples of problems you want to avoid are when text overlaps with other elements or when text gets cut off.
Overlapping Text Styles
“Fog” by Carl Sandburg
The fog comes on little cat feet. It sits looking over harbor and city on silent haunches and then moves on.
p {
font-size: 18px
}
h6 {
font-size: 40px;
}Cut off text
An apple a day does not keep the doctor away
h6 {
font-size: 24px;
}Checklist
- Your text doesn’t disappear or get cut off when adjustments to the text styles are applied.
- Text, images, and other content do not overlap with each other.
- All buttons, form fields, and other controls are usable and not broken.
- Avoid using a scrollbar when the text size is increased. It is best practice to show all of the text in a sentence. However, it is acceptable to have to scroll horizontally to get to different sections of a page.
More Information
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html
Contrast Ratio
Overview
Some users will need sufficient color contrast between the color of the text and the background color. These users may have visual impairments such as color blindness or lack contrast sensitivity due to aging. For example, light grey text on a white background does not have enough contrast for some people. There should be enough contrast between the text of the website and the background color to enable users with visual impairments to read the text without the use of contrast-enhancing technology. With the help of a contrast checker, you should ensure that the contrast ratio of the visual presentation of text and images of text should be at least 4.5:1
There are a ton of contrast checkers out there in the form of plugins for Figma, Sketch and browsers. A Figma plugin that we like to use is Able
Exceptions
- Large Text: Both large-scale text and images of large-scale text should have a contrast ratio of at least 3:1
- Incidental: The following below have no contrast: – Part of an inactive user interface component – Purely decoration – Not visible to anyone – Part of a picture that contains significant other visual content
- Logotypes: Logos that include text or brand name have no contrast requirement.
Hover or Focus States
Overview
There are 3 criteria to consider when creating new elements that appear on hover or focus: dismissible, hoverable, and persistent.
Dismissible
The new element that appears upon hover/focus should be dismissable by the user without them having to move their cursor or keyboard focus. In the example we’ve provided, a user can press the escape key to dismiss the tooltip without having to move their cursor.
This example fulfills the dismissable criterion because you can use the esc button to dismiss it. This is useful because in this case, the tool tip covers the content above the star button.
To dismiss, press your esc button
Some text over here
Hover over me
Hoverable
If the new element appears upon hover, then the user should be able to move their cursor to it, without it disappearing. This is because In many cases, the cursor may cover parts of the new element, which you can see in our example.
In this example, you can see that you can move your cursor away from the start button and onto the tooltip, without it disappearing. This is useful in cases where the cursor may be covering part of the tooltip text.
Hover over the tooltip
Hover over me
Persistent
Give users enough time to perceive the new element after it has become visible. Some users may require a bit more time for a lot of different reasons such as to change magnification or to bring the new element into their visual field. Once the new element appears, it should remain visible until:
- The user removes hover/focus by moving their cursor
- It is dismissed through an alternative mechanism, mentioned in the dismissable criteria
- The information or use of the new element is no longer relevant or applicable. An example would be if it was a ‘busy’ message but was then not busy.