Spacing

Spacing allows users to have consistency and visual hierarchy among elements on the page. A spacing system supports the creation of a predictable layout and an understandable interface.

Use Cases

The user should be able to:

  • Use the space to create maintain consistency with the enterprise
  • Use smaller space to have related and grouped close to each other

Interaction and Style

Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

WCAG 2.1 success criterion 1.3.1


Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

WCAG 2.1 success criterion 1.3.2


Orientation: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

WCAG 2.1 success criterion 1.3.4


Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

WCAG 2.1 success criterion 1.4.4


Text Spacing: In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • 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. Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

WCAG 2.1 success criterion 1.4.12


Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

WCAG 2.1 success criterion 3.2.3

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.