CSS word-spacing playground

Explore word-spacing with controls for spreading out or tightening words on a real text block and checking how readability changes.

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

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<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;
}