留白

Whitespace is the deliberate use of empty space in a design — the margins around text blocks, the padding inside components, the gaps between sections, the breathing room around a headline. The term can feel paradoxical: "empty" space that is carefully, intentionally designed. But whitespace is one of the most powerful tools in visual communication, functioning as an active design element rather than mere absence.

In typography, whitespace works at multiple scales simultaneously. Micro-whitespace includes the space between letters (tracking), between words (word-spacing), and between lines (leading). Macro-whitespace encompasses margins, column gutters, section breaks, and the overall spatial rhythm of a layout. Both scales work together to create hierarchy, direct attention, and establish the pace at which content is consumed.

/* Generous whitespace communicates quality and focus */
.hero-section {
  padding: 6rem 2rem;
  max-width: 60ch;
  margin: 0 auto;
}

/* Whitespace in typography: the rhythm of spacing */
.article {
  /* Line spacing creates vertical whitespace rhythm */
  line-height: 1.75;

  /* Paragraph spacing is whitespace between thoughts */
  p + p {
    margin-top: 1.5em;
  }

  /* Headings use whitespace to signal hierarchy transitions */
  h2 {
    margin-top: 3em;
    margin-bottom: 0.75em;
  }
}

/* Tight whitespace communicates density, utility, urgency */
.data-table {
  td {
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
  }
}

/* CSS logical properties for language-agnostic whitespace */
.content-block {
  padding-block: 2rem;
  padding-inline: 1.5rem;
  margin-block-end: 1rem;
}

The relationship between whitespace and perceived value is well-documented in design research. Premium brands — luxury fashion, high-end technology, upscale hospitality — consistently use more whitespace than discount or mass-market competitors. The space communicates that the brand has nothing to hide and can afford to let each element breathe.

Conversely, dense, whitespace-minimal design communicates efficiency, comprehensiveness, and utility — appropriate for dashboards, comparison tools, and content aggregators. The right amount of whitespace is always contextual.

For web developers, understanding whitespace means resisting the impulse to fill every available pixel. Typefaces like Cormorant Garamond or Playfair Display are designed with the assumption of generous surrounding space — they look elegant with room to breathe and crowded when packed too tightly.