BaselineLab

CSS font-variant playground

Explore font-variant with controls for caps, ligatures, numeric variants, east-asian forms, and position on a real text block.

Ask AI

CSS font-variant playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.

BaselineLab compara font-variant con texto real: Office affinity, efficient flow. Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd. El resultado depende de las variantes OpenType disponibles en la fuente.

HTML
<p class="font-variant-sample">
  BaselineLab compara font-variant con texto real: Office affinity, efficient flow.
  Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd.
  El resultado depende de las variantes OpenType disponibles en la fuente.
</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-2xl [font-family:Georgia,_Cambria,_Times_New_Roman,_Times,_serif] text-2xl font-semibold leading-normal [font-variant:small-caps_common-ligatures_oldstyle-nums_tabular-nums_diagonal-fractions_ordinal]">
  BaselineLab compara font-variant con texto real: Office affinity, efficient flow.
  Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd.
  El resultado depende de las variantes OpenType disponibles en la fuente.
</p>
CSS
.font-variant-sample {
  max-inline-size: 40rem;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.45;
  font-variant: small-caps common-ligatures oldstyle-nums tabular-nums diagonal-fractions ordinal;
}