CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary:spacing_contrast

Typographic Spacing Contrast

the difference in line-height, letter-spacing,
and word-spacing that shapes texture and readability

Typographic spacing contrast is the contrast of textual space
— the micro‑spacing that determines how text breathes within itself.
Where spatial contrast shapes the space around elements,
typographic spacing contrast shapes the space inside the text block.

Spacing contrast is subtle but structural:

  • Tight spacing feels dense, efficient, technical
  • Loose spacing feels open, calm, literary
  • Balanced spacing feels natural and readable

Spacing contrast is the difference
between texture and tone in typography
.


What spacing contrast does

  • Shapes readability — too tight strains; too loose drifts
  • Creates typographic texture — dense vs. airy paragraphs
  • Supports hierarchy — headings often use tighter or looser spacing
  • Sets tone — open spacing feels calm; tight spacing feels engineered
  • Improves rhythm — consistent spacing creates a steady cadence

Spacing contrast is how
typography breathes
.


Forms of typographic spacing contrast

  • Line-height contrast — vertical openness vs. tightness
  • Letter-spacing contrast — tracking that changes texture
  • Word-spacing contrast — flow vs. fragmentation
  • Paragraph spacing contrast — separation within text blocks

Each form expresses a different kind of
typographic breath
.


How we describe spacing contrast when working with AI

“Increase spacing contrast by loosening the line-height.”
“Tighten letter-spacing for a more technical tone.”
“Use generous line-height for long-form reading.”
“Reduce spacing contrast to keep the text compact.”
“Increase paragraph spacing to clarify structure.”

These instructions turn spacing into intention
rather than guesswork
.


Why spacing contrast matters

Typographic spacing contrast is the foundation of:

  • Readability — comfort through breathing room
  • Tone — calm vs. dense text texture
  • Rhythm — predictable spacing patterns
  • Hierarchy — spacing signals importance

Without spacing contrast,
text feels flat, cramped, or unstable
.


Tony de Araujo —New York | Lisbon


vocabulary/css_visual_vocabulary/spacing_contrast.txt · Last modified: by editor