CSS font-size playground

Explore font-size with controls for comparing browser keywords, relative values, and lengths on a real text block.

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

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