Resguardos de fuentes visualmente estables

Cuando se cargan las fuentes web, suelen reemplazar una fuente de resguardo que tiene dimensiones diferentes, incluso si ambas están configuradas con el mismo font-size. Esto provoca un "cambio de diseño" (Cumulative Layout Shift) y puede hacer que el texto sea ilegible si las letras minúsculas del resguardo (altura x) son significativamente diferentes de la fuente preferida.

La propiedad font-size-adjust resuelve este problema normalizando el tamaño de la fuente en función de una métrica específica (por lo general, la altura de la x), lo que garantiza que el texto ocupe el mismo espacio visual, independientemente de la fuente que esté activa en ese momento.

Pasos de implementación

1. Identifica la relación de aspecto de tu fuente preferida

Para normalizar los resguardos, necesitas el "valor de aspecto" (la proporción de letras minúsculas con respecto al tamaño de la fuente) de tu fuente principal.

• Detección automática (recomendado): Usa la palabra clave from-font para permitir que el navegador extraiga la proporción de tu fuente web principal.
• Cálculo manual: Si conoces el valor específico (p.ej., 0.545 para Verdana), puedes proporcionarlo directamente para obtener un control más preciso.

2. Aplica font-size-adjust al contenedor de texto

Aplica la propiedad al elemento o a un contenedor superior. Esto garantiza que, si la fuente principal no se carga o está en proceso de carga, la fuente de resguardo se escala para que coincida con el tamaño visual de la fuente principal.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (Opcional) Ajusta las métricas específicas

Si bien la altura x es la opción predeterminada y más común, puedes normalizarla con otras métricas, como cap-height (útil para encabezados todo en mayúsculas) o ch-width (útil para fuentes monoespaciadas).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Verifica la estabilidad visual

Asegúrate de que el valor de font-size-adjust alinee correctamente el resguardo. Para probar esto, bloquea temporalmente la fuente web o ajusta la declaración font-family en las Herramientas para desarrolladores de tu navegador y verifica que el diseño del texto se mantenga estable.

Estrategias de resguardo

En los navegadores que no admiten font-size-adjust, la fuente se renderizará en su escala predeterminada. Esto puede provocar cambios en el diseño o en la legibilidad durante los cambios de fuente.

Para mitigar este problema sin font-size-adjust, puedes usar los descriptores @font-face size-adjust, ascent-override y descent-override para ajustar manualmente las fuentes de resguardo, aunque son más complejos de calcular que un solo valor de font-size-adjust.