CSS font-weight playground

Explore font-weight with controls for comparing absolute keywords, relative keywords, and numeric weights on a real text block.

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

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