Ajuste de tamaño de CSS para @font-face

A medida que se carga una fuente web, ahora puedes ajustar su escala para normalizar los tamaños de fuente del documento y evitar cambios de diseño cuando cambies de fuente.

Adam Argyle

Considera la siguiente demostración, en la que el font-size es un 64px coherente y la única diferencia entre cada uno de estos encabezados es el font-family. Los ejemplos de la izquierda no se ajustaron y tienen un tamaño final incoherente. En los ejemplos de la derecha, se usa size-adjust para garantizar que 64px sea el tamaño final coherente.

En este ejemplo, se usan las herramientas de depuración de diseño de cuadrícula de CSS de las Herramientas para desarrolladores de Chrome para mostrar las alturas.

En esta publicación, se explora un nuevo descriptor de CSS font-face llamado size-adjust. También se muestran algunas formas de corregir y normalizar los tamaños de fuente para lograr una experiencia del usuario más fluida, sistemas de diseño coherentes y un diseño de página más predecible. Un caso de uso importante es optimizar la renderización de fuentes web para evitar los cambios de diseño acumulativos (CLS).

Browser Support

• 92
• 92
• 92
• 17

Source

Aquí tienes una demostración interactiva del espacio del problema. Intenta cambiar el tipo de letra con el menú desplegable y observa lo siguiente:

1. Las diferencias de altura en los resultados
2. Cambios de contenido visualmente discordantes
3. Áreas de destino interactivas en movimiento (el menú desplegable se mueve de un lado a otro).

Término clave: Familia de fuentes frente a tipo de letra: Un tipo de letra se denomina por su nombre de familia más su fuente. Helvetica Bold se refiere a la tipografía en negrita específica, mientras que Helvetica se refiere de forma genérica a toda la familia de más de 8 tipografías (normal, negrita, cursiva, etcétera). Con CSS @font-face, trabajarás con familias tipográficas, aunque para usarlas debas escribir font-family.

Cómo ajustar el tamaño de las fuentes con size-adjust

Introducción a la sintaxis:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Crea un tipo de letra personalizado llamado Adjusted Typeface.
2. Usa size-adjust para aumentar cada glifo al 150% de su tamaño predeterminado.
3. Afecta solo al tipo de letra importado.

Usa el tipo de letra personalizado anterior de la siguiente manera:

h1 {
  font-family: "Adjusted Typeface";
}

Advertencia: Si el segundo encabezado de la demostración anterior no es más grande que el primero, tu navegador no admite size-adjust.

Mitiga el CLS con un intercambio de fuentes fluido

En el siguiente GIF, observa los ejemplos de la izquierda y cómo se produce un cambio cuando se modifica la fuente. Este es solo un pequeño ejemplo con un solo elemento de título, y el problema es muy evidente.

El ejemplo de la izquierda tiene un cambio de diseño, mientras que el de la derecha no.

Para mejorar la renderización de fuentes, una gran técnica es el intercambio de fuentes. Renderiza una fuente del sistema de carga rápida para mostrar primero el contenido y, luego, cámbiala por una fuente web cuando esta termine de cargarse. Esto te brinda lo mejor de ambos mundos: el contenido es visible lo antes posible y obtienes una página con un estilo agradable sin sacrificar el tiempo de acceso al contenido de tus usuarios. Sin embargo, el problema es que, a veces, cuando se carga la fuente web, se desplaza toda la página, ya que se presenta con un tamaño de altura de cuadro ligeramente diferente.

Más contenido equivale a un mayor cambio de diseño potencial cuando se intercambia la fuente

Si colocas size-adjust en la regla @font-face, se establece un ajuste de glifo global para la familia de fuentes. Si se hace en el momento adecuado, el cambio visual será mínimo y fluido. Para crear un intercambio sin problemas, ajusta manualmente o prueba esta calculadora de ajuste de tamaño de Malte Ubl.

Elige una fuente web de Google y obtén un fragmento de @font-face preajustado.

Al principio de esta publicación, el problema del tamaño de la fuente se solucionó mediante prueba y error. size-adjust se modificó en el código fuente hasta que el mismo encabezado en Cookie y Arial renderizó el mismo 64px que Press Start 2P de forma natural. Alineé dos fuentes con un tamaño de fuente objetivo.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrando fuentes

Como autor, tú determinas los objetivos de calibración para normalizar la escala de la fuente. Puedes normalizar en Times, Arial o una fuente del sistema y, luego, ajustar las fuentes personalizadas para que coincidan. O bien, puedes ajustar las fuentes locales para que coincidan con las que descargues.

Estrategias para la calibración de size-adjust:

1. Objetivo remoto:
   Ajusta las fuentes locales para que se parezcan a las fuentes descargadas.
2. Objetivo local:
   Ajusta las fuentes descargadas para que se acerquen a las fuentes de destino locales.

Ejemplo 1: Destino remoto

Considera el siguiente fragmento, que ajusta una fuente disponible de forma local para que coincida con el tamaño de una fuente personalizada de src remota. Una fuente personalizada remota es el objetivo de la calibración, tal vez una fuente de marca:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

En este ejemplo, la fuente local Arial se ajusta en previsión de una fuente personalizada cargada para un intercambio sin problemas.

Esta estrategia tiene la ventaja de ofrecer a los diseñadores y desarrolladores la misma fuente para el tamaño y la tipografía. La marca es el objetivo de calibración. Esta es una gran noticia para los sistemas de diseño.

La calculadora de Malte también funciona con un tipo de letra de marca como objetivo. Elige una fuente de Google Fonts y se calculará cómo ajustar Arial para intercambiarla sin problemas. Este es un ejemplo de CSS de Roboto de la calculadora, en el que se carga Arial y se denomina "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Advertencia: El orden de font-family es fundamental. Aquí es donde se definen el orden y la prioridad. Asegúrate de que la tipografía que más deseas esté en primer lugar. Además, es posible que local(Arial) no esté disponible en todos los dispositivos de los usuarios, por lo que es importante proporcionar varias alternativas en la familia de fuentes.

Para crear un ajuste completamente multiplataforma, consulta el siguiente ejemplo, que proporciona 2 fuentes de resguardo locales ajustadas antes de una fuente de marca.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Ejemplo 2: Segmentación local

Considera el siguiente fragmento, que ajusta una fuente personalizada de marca para que coincida con Arial:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Esta estrategia tiene la ventaja de renderizar sin ajustes y, luego, ajustar las fuentes entrantes para que coincidan.

Ajuste más preciso con ascent-override, descent-override y line-gap-override

Si el escalamiento genérico de glifos no es suficiente para tus estrategias de diseño o carga, aquí tienes algunas opciones de ajuste más precisas que funcionan junto con size-adjust. Las propiedades ascent-override, descent-override y line-gap-override se implementan actualmente en Chromium 87 y versiones posteriores, y en Firefox 89 y versiones posteriores.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

El descriptor ascent-override define la altura por encima de la línea de base de una fuente.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

El título rojo (sin ajustar) tiene espacio por encima de las letras mayúsculas A y O, mientras que el título azul se ajustó para que la altura de las mayúsculas se ajuste al cuadro delimitador general.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

El descriptor descent-override define la altura por debajo de la línea de base de la fuente.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

El título rojo (sin ajustar) tiene espacio debajo de las líneas de base de la D y la O, mientras que el título azul se ajustó para que las letras queden bien apoyadas en la línea de base.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

El descriptor line-gap-override define la métrica de espacio entre líneas de la fuente. Este es el espacio entre líneas recomendado de la fuente o el interlineado externo.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

El título rojo (sin ajustar) no tiene line-gap-override, por lo que, básicamente, está en 0%, mientras que el título azul se ajustó un 50% hacia arriba, lo que crea espacio por encima y por debajo de las letras según corresponda.

Revisión general

Cada una de estas anulaciones ofrece una forma adicional de recortar el exceso del cuadro delimitador de texto seguro de la Web. Puedes adaptar el cuadro de texto para que la presentación sea precisa.

Advertencia: Si alguna de las demostraciones anteriores no muestra diferencias, tu navegador no admite las anulaciones.

Conclusión

La función de CSS @font-face size-adjust es una forma emocionante de personalizar el cuadro delimitador de texto de tus diseños web para mejorar la experiencia de intercambio de fuentes y, así, evitar el cambio de diseño para los usuarios. Para obtener más información, consulta estos recursos:

• Especificación de CSS Fonts Level 5
• Ajuste de tamaño en MDN
• Generador de @font-face de intercambio fluido
• Cumulative Layout Shift (CLS) en web.dev
• Una nueva forma de reducir el impacto de la carga de fuentes: Descriptores de fuentes CSS