Getting Creative With “The Measure”

Getting Creative With “The Measure”

CSS-Tricks introduces a typography-driven approach to layout, using the “measure”—the length of a line of text—as a foundational variable. A 60ch measure (approximately 65 characters) is cited as a baseline for comfortable reading.

Why This Matters

Traditional layouts often prioritize screen breakpoints over content needs, leading to long-line syndrome on wide screens. By anchoring layout decisions to the measure, developers can create adaptive designs that prioritize readability. This approach reduces reliance on arbitrary screen-size guesses, which can fail on diverse devices and content lengths.

Key Insights

• “60ch measure for optimal readability (CSS-Tricks, 2025)”
• “Container queries over media queries for content-driven layouts”
• “CSS custom properties for dynamic measure adjustments”

Working Example

:root {
  --measure: 60ch;
}

article {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

article {
  column-width: var(--measure);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 1fr;
}

@container (max-width: var(--measure)) {
  [data-layout="yogi"] {
    grid-template-columns: 1fr;
  }
}

Practical Applications

• Use Case: Multi-column layouts using column-width: var(--measure)
• Pitfall: Rigid measure values ignoring font variations, leading to inconsistent readability

References:

• https://css-tricks.com/getting-creative-with-the-measure/

---