MultiDimensionHierarchy [pattern] v1.0.0

Strong visual hierarchy requires combining at least two of the five hierarchy dimensions simultaneously on primary elements: size, weight, color contrast, position, and surrounding whitespace. Single-dimension hierarchy (size alone, or color alone) is weak and fails the squint test.

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.

MultiDimensionHierarchy [pattern] v1.0.0

Strong visual hierarchy requires combining at least two of the five hierarchy dimensions simultaneously on primary elements: size, weight, color contrast, position, and surrounding whitespace. Single-dimension hierarchy (size alone, or color alone) is weak and fails the squint test.

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.

Sources

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.