CSS font-size-adjust playground

Explore font-size-adjust with controls for preserving perceived text size when changing font family and metric.

BaselineLab compara font-size-adjust con texto real y cambios de familia. Observa x-height, cap-height y ancho de caracteres con palabras como minimum, fallback y readable. La propiedad ayuda a conservar el tamaño percibido cuando cambia la fuente usada.

HTML

<p class="font-size-adjust-sample">
  BaselineLab compara font-size-adjust con texto real y cambios de familia.
  Observa x-height, cap-height y ancho de caracteres con palabras como minimum, fallback y readable.
  La propiedad ayuda a conservar el tamaño percibido cuando cambia la fuente usada.
</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:Verdana,_Geneva,_sans-serif] text-2xl font-semibold leading-normal [font-size-adjust:0.55]">
  BaselineLab compara font-size-adjust con texto real y cambios de familia.
  Observa x-height, cap-height y ancho de caracteres con palabras como minimum, fallback y readable.
  La propiedad ayuda a conservar el tamaño percibido cuando cambia la fuente usada.
</p>

CSS

.font-size-adjust-sample {
  max-inline-size: 40rem;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  font-size-adjust: 0.55;
}