Playground de font-weight en CSS

Explora font-weight con controles para comparar keywords absolutas, keywords relativas y pesos numéricos sobre un bloque de texto real.

BaselineLab permite comparar font-weight con texto real, pesos numericos, keywords absolutas y valores relativos antes de copiar el CSS. Algunas fuentes variables aceptan valores intermedios; otras usan el peso disponible mas cercano.

HTML

<p class="font-weight-sample">
  BaselineLab permite comparar font-weight con texto real,
  pesos numericos, keywords absolutas y valores relativos antes de copiar el CSS.
  Algunas fuentes variables aceptan valores intermedios; otras usan el peso disponible mas cercano.
</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 text-2xl leading-snug font-bold">
  BaselineLab permite comparar font-weight con texto real,
  pesos numericos, keywords absolutas y valores relativos antes de copiar el CSS.
  Algunas fuentes variables aceptan valores intermedios; otras usan el peso disponible mas cercano.
</p>

CSS

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