CSS line-height playground

Explore line-height with controls for comparing normal, unitless values, rem lengths, and percentages on a real text block.

BaselineLab permite comparar line-height con texto real, lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical. Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.

HTML

<p class="line-height-sample">
  BaselineLab permite comparar line-height con texto real,
  lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical.
  Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.
</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-xl text-lg leading-normal">
  BaselineLab permite comparar line-height con texto real,
  lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical.
  Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.
</p>

CSS

.line-height-sample {
  max-inline-size: 36rem;
  font-size: 1.125rem;
  line-height: 1.5;
}