Playground de font-size-adjust en CSS

Explora font-size-adjust con controles para conservar el tamaño percibido del texto al cambiar de fuente y métrica.

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

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