Fecha de publicación: 23 de julio de 2024
La propiedad CSS font-size-adjust llega a Chrome hoy y forma parte de Baseline Newly Available. Esta propiedad puede ayudar a evitar que el diseño cambie cuando se cargan las fuentes de resguardo y garantizar la legibilidad de las fuentes de resguardo en tamaños de fuente más pequeños. La propiedad font-size-adjust forma parte de Interop 2024, por lo que esta es otra victoria para el esfuerzo de mejorar la interoperabilidad de la plataforma web.
El problema
Cuando comparas dos fuentes configuradas con el mismo tamaño, según la forma y el tamaño de los glifos, el texto que se muestra puede ocupar una cantidad muy diferente de espacio. A modo de ejemplo, en la siguiente demostración, se muestra texto en Verdana y Arial, ambos configurados en 16 píxeles.
La diferencia de tamaño se debe al hecho de que el valor de aspecto, la altura de las letras minúsculas en comparación con las mayúsculas en una fuente, varía entre las fuentes.
Esto puede causar dos problemas cuando se usa una fuente con un valor de aspecto diferente como resguardo. En primer lugar, cambiará la cantidad de espacio que ocupa la fuente. En segundo lugar, la fuente de resguardo que elijas puede ser menos legible que la que se especificó primero, en especial en tamaños de fuente pequeños. Esto se debe a que la altura relativa de las letras minúsculas a las mayúsculas es un factor clave en la legibilidad.
Cómo ayuda font-size-adjust
La propiedad font-size-adjust te permite ajustar la fuente de resguardo para que coincida mejor con la primera fuente. En el siguiente ejemplo, se muestran las dos fuentes que se mostraron anteriormente. Esta vez, la segunda fuente se ajustó para que coincida con la primera.
font-size-adjust.En este ejemplo, se usa un solo valor, un número, que ajusta las fuentes con la métrica de fuente predeterminada de ex-height. Esta es la proporción entre la altura de la x, la altura de una x en minúsculas en la fuente, y el tamaño de la fuente. También puedes especificar la métrica de fuente que se usa. En el siguiente ejemplo, normalicé las fuentes con la palabra clave ch-width, además del número.
font-size-adjust con la métrica de fuente de ancho de caracteres.Para ver todos los valores posibles, consulta la documentación de MDN para font-size-adjust.
Vale la pena mirar tu sitio con la fuente de resguardo y ver si un pequeño ajuste con font-size-adjust puede ayudar a los lectores que usan la fuente de resguardo a tener una mejor experiencia, en especial ahora que está disponible en todas partes.