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 el cambio de diseño al cambiar de fuente.

Adam Argyle

Considera la siguiente demostración, en la que 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 inconsistente. En los ejemplos de la derecha, se usa size-adjust para garantizar que 64px tenga 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 alturas.

En esta entrada, se explora un nuevo descriptor de fuente de CSS llamado size-adjust. También se muestran algunas formas de corregir y normalizar los tamaños de fuente para 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 el cambio de diseño acumulado (CLS).

Navegadores compatibles

  • 92
  • 92
  • 92
  • 17

Origen

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

  1. Indica las diferencias de altura en los resultados.
  2. Cambios en el contenido visualmente molestos
  3. Movimiento de áreas objetivo interactivas (el menú desplegable se desplaza de un lado a otro)

Cómo ajustar las fuentes con size-adjust

Una 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 la escala de cada glifo hasta el 150% de su tamaño predeterminado.
  3. Afecta solo al único tipo de letra importado.

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

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

Mitigación de CLS con 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 notorio.

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 excelente 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 la fuente web termine de cargarse. Esto te brinda lo mejor de ambos mundos: el contenido se muestra lo antes posible y obtienes una página con un estilo agradable sin sacrificar el tiempo que los usuarios pasan al contenido. Sin embargo, el problema es que, a veces, cuando se carga la fuente web, cambia toda la página, ya que se presenta a una altura de cuadro ligeramente diferente.

Una mayor cantidad de contenido equivale a un mayor cambio de diseño cuando se cambia la fuente

Si colocas size-adjust en la regla @font-face, se establece un ajuste de glifo global para el tipo de fuente. Este momento adecuado generará un cambio visual mínimo, un intercambio continuo. Para crear un intercambio fluido, ajusta la mano o prueba esta calculadora de tamaño de Malte Ubl.

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

Al comienzo de esta publicación, solucionamos el problema del tamaño de la fuente mediante un proceso de prueba y error. Se movió size-adjust 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 de destino.

@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');
}

Cómo calibrar las fuentes

Como autor, tú determinas los objetivos de calibración para normalizar la escala de fuentes. Puedes normalizar el uso de Times, Arial o una fuente del sistema y, luego, ajustar las fuentes personalizadas para que coincidan. También puedes ajustar las fuentes locales para que coincidan con lo que descargaste.

Estrategias para la calibración de size-adjust:

  1. Destino remoto:
    Ajusta las fuentes locales según las fuentes descargadas.
  2. Destino local:
    Ajusta las fuentes descargadas a las fuentes de destino locales.

Ejemplo 1: destino remoto

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

@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 está ajustando en espera de una fuente personalizada cargada, para un intercambio fluido.

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.

Tener un tipo de letra de marca como objetivo también es el funcionamiento de la calculadora de Malte. Elige una fuente de Google y se calculará cómo ajustar Arial para intercambiar con ella sin problemas. Este es un ejemplo de Roboto CSS desde la calculadora, en el que Arial se carga y se llama “Roboto-fallback”:

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

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: orientació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 ajuste genérico de los glifos no es suficiente para tus estrategias de diseño o carga, aquí encontrarás algunas opciones de ajuste más precisas que funcionan junto con size-adjust. Actualmente, las propiedades ascent-override, descent-override y line-gap-override están implementadas en Chromium 87 y versiones posteriores, y Firefox 89 y versiones posteriores.

tijeras encima y soplar las anulaciones de palabras, lo que demuestra las áreas que las características pueden recortar

ascent-override

Navegadores compatibles

  • 87
  • 87
  • 89
  • x

Origen

El descriptor ascent-override define la altura por encima del modelo de referencia 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 encima de la A y la O en mayúscula, mientras que el título azul se ajustó para que la altura del tope se ajuste bien al cuadro de límite general.

descent-override

Navegadores compatibles

  • 87
  • 87
  • 89
  • x

Origen

El descriptor descent-override define la altura por debajo del modelo de referencia 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 un espacio debajo de los modelos de referencia D y O, mientras que el título azul se ajustó para que las letras queden ajustados sobre el modelo de referencia.

line-gap-override

Navegadores compatibles

  • 87
  • 87
  • 89
  • x

Origen

El descriptor line-gap-override define la métrica de separación entre líneas para la fuente. Esta es la fuente recomendada con separación de línea o anterior.

@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, básicamente se encuentra en 0%, mientras que el título azul se ajustó en un 50%, lo que crea un espacio encima y debajo de las letras según corresponda.

Revisión general

Cada una de estas anulaciones ofrece una forma adicional de cortar el exceso del cuadro de límite de texto seguro de la Web. Puedes adaptar el cuadro de texto para lograr una presentación precisa.

Conclusión

La función @font-face size-adjust de CSS es una manera 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:

Foto de Kristian Strand en Unsplash