Playground de font-size en CSS

Explora font-size con controles para comparar keywords del navegador, valores relativos y longitudes sobre un bloque de texto real.

BaselineLab permite comparar font-size con texto real, valores relativos, keywords del navegador y longitudes fijas antes de llevarlo al CSS. Ajusta el tamaño y comprueba como cambia la lectura sin perder el ritmo del bloque.

HTML

<p class="font-size-sample">
  BaselineLab permite comparar font-size con texto real,
  valores relativos, keywords del navegador y longitudes fijas antes de llevarlo al CSS.
  Ajusta el tamaño y comprueba como cambia la lectura sin perder el ritmo del bloque.
</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-xl leading-normal text-xl">
  BaselineLab permite comparar font-size con texto real,
  valores relativos, keywords del navegador y longitudes fijas antes de llevarlo al CSS.
  Ajusta el tamaño y comprueba como cambia la lectura sin perder el ritmo del bloque.
</p>

CSS

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