CSS letter-spacing playground

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

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

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