Proximity

Goals:

• Consistent spacing between elements one one page
• Rationale for different levels of spacing, consistency across pages

Accessibility

Space between paragraphs

WCAG 2.1 specifies Spacing following paragraphs to at least 2 times the font size: Success Criterion 1.4.12 Text Spacing.

Space between words

WCAG 2.1 specifies Word spacing to at least 0.16 times the font size: Success Criterion 1.4.12 Text Spacing.

Some people with low vision need more space between words and want to be able to adjust the line-height, according to the W3C in Accessibility Requirements for People with Low Vision: Leading.

Word spacing can be adjusted with the CSS word-spacing property. Word spacing is also affected when using text-align: justify: Low vision needs: Justification.

Space between lines

WCAG 2.1 specifies Line height (line spacing) to at least 1.5 times the font size: Success Criterion 1.4.12 Text Spacing.

Some people with low vision need more space between lines and want to be able to adjust the line-height, according to the W3C in Accessibility Requirements for People with Low Vision: Leading.

Tokens

proximity-paragraph

proximity-word

proximity-line

Technology

Considerations:

• In layouts with a baseline grid, it should align with the grid.
• Horizontal and vertical scale might have different implementations.
• There is overlap with the concept of alignment.
• Minimum proximity is probably a thing.
• Is padding of table cells related?

Example

:root {
  /* No space between items. I wish we had better options for naming this. */
  --nih-proximity-zero: 0;

  /* The minimum space between words */
  --nih-proximity-word: 0.16em;

  /* The minimum space between lines */
  --nih-proximity-line: 1.5;

  /* The minimum space between an icon and related content */
  --nih-proximity-icon: 1ch;

  /* The minimum space between paragraphs */
  --nih-proximity-paragraph: 2em;
}

pre {
  line-height: var(--nih-proximity-line);
}

Proximity vs. distance

:root {
  /* The maximum space between a heading and related content */
  --nih-proximity-heading: 0.75em;

  /* The space between a H2 and related content */
  --nih-proximity-heading-2: var(--nih-proximity-heading) * 1.5;

  /* The mimimum space between a heading and unrelated content */
  --nih-distance-heading: 1.5em;

  /* The space between a H2 and unrelated content */
  --nih-distance-heading-2: var(--nih-distance-heading) * 1.5;
}

.h2 {
  margin-block-start: var(--nih-distance-heading);
  margin-block-end: var(--nih-proximity-heading);
}
.p + .p {
  margin-block-start: var(--nih-proximity-paragraph);
  margin-block-end: var(--nih-proximity-paragraph);
}