CSS font-style playground

Explore font-style with controls for comparing true italics, synthesized oblique text, and slant angles on a real text block.

BaselineLab permite comparar font-style con texto real, cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS. El resultado depende de las variantes disponibles en la familia tipografica.

HTML

<p class="font-style-sample">
  BaselineLab permite comparar font-style con texto real,
  cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS.
  El resultado depende de las variantes disponibles en la familia tipografica.
</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-normal italic">
  BaselineLab permite comparar font-style con texto real,
  cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS.
  El resultado depende de las variantes disponibles en la familia tipografica.
</p>

CSS

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