Playground de letter-spacing en CSS

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

BaselineLab permite comparar letter-spacing con texto real, valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4. Ajusta el espaciado con cuidado: demasiado poco o demasiado puede romper la lectura.

HTML

<p class="letter-spacing-sample">
  BaselineLab permite comparar letter-spacing con texto real,
  valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4.
  Ajusta el espaciado con cuidado: demasiado poco o demasiado puede romper la lectura.
</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 tracking-[0.08em]">
  BaselineLab permite comparar letter-spacing con texto real,
  valores normales, longitudes positivas y negativas, y porcentajes definidos por CSS Text Level 4.
  Ajusta el espaciado con cuidado: demasiado poco o demasiado puede romper la lectura.
</p>

CSS

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