Playground de word-spacing en CSS

Explora word-spacing con controles para separar o acercar palabras sobre un bloque de texto real y comprobar cómo cambia la lectura.

BaselineLab permite comparar word-spacing con texto real, valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4. Ajusta el espacio entre palabras sin perder ritmo, longitud de línea ni legibilidad.

HTML

<p class="word-spacing-sample">
  BaselineLab permite comparar word-spacing con texto real,
  valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4.
  Ajusta el espacio entre palabras sin perder ritmo, longitud de línea ni legibilidad.
</p>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<p class="max-w-2xl text-2xl font-bold leading-normal [word-spacing:0.35rem]">
  BaselineLab permite comparar word-spacing con texto real,
  valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4.
  Ajusta el espacio entre palabras sin perder ritmo, longitud de línea ni legibilidad.
</p>

CSS

.word-spacing-sample {
  max-inline-size: 38rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.45;
  word-spacing: 0.35rem;
}