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

Cuando 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 cuando cambias de fuente.

Adam Argyle

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

En este ejemplo, se usan las herramientas de depuración del 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 tipo de fuente de CSS llamado size-adjust. También muestra 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 el desplazamiento de diseño acumulativo (CLS).

Navegadores compatibles

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 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. Las diferencias de altura en los resultados
  2. Cambios de contenido visualmente discordantes
  3. Áreas de destino interactivas móviles (el menú desplegable salta).

Cómo escalar 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 cada glifo al 150% de su tamaño predeterminado.
  3. Solo afecta al único tipo de letra importado.

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

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

Mitiga el CLS con el intercambio de fuentes sin interrupciones

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

El ejemplo de la izquierda tiene un cambio de diseño, 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 que se cargue rápido para mostrar el contenido primero 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 diseño atractivo sin sacrificar el tiempo del usuario en el contenido. Sin embargo, el problema es que, a veces, cuando se carga la fuente web, se desplaza toda la página, ya que se presenta en un tamaño de altura de cuadro ligeramente diferente.

Más contenido equivale a más cambios de diseño potenciales cuando se intercambian las fuentes.

Cuando se coloca size-adjust en la regla @font-face, se establece un ajuste de glifos global para el tipo de letra. Si se hace correctamente, se producirá un cambio visual mínimo, un intercambio sin problemas. Para crear un cambio sin problemas, ajusta manualmente el tamaño o prueba esta calculadora de ajuste de tamaño de Malte Ubl.

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

Al comienzo de esta publicación, se solucionó el problema del tamaño de la fuente por ensayo y error. Se empujó 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 a 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');
}

Cómo calibrar fuentes

Tú, como autor, 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. También puedes ajustar las fuentes locales para que coincidan con lo que descargas.

Estrategias para la calibración de size-adjust:

  1. Objetivo remoto:
    Ajusta las fuentes locales a las fuentes descargadas.
  2. Objetivo local:
    Ajusta las fuentes descargadas a las fuentes de destino locales.

Ejemplo 1: Objetivo 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, quizás 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 anticipación a 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.

Tener un tipo de letra de marca como objetivo también es la forma en que funciona la calculadora de Malte. Elige una fuente de Google y se calculará cómo ajustar Arial para cambiarla sin problemas. Este es un ejemplo de CSS de Roboto de la calculadora, en el que se carga Arial y se le asigna el nombre "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 en anticipación a 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 la 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 ningún ajuste 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 los glifos no es un ajuste suficiente para tu diseño o estrategias de carga, aquí tienes algunas opciones de ajuste más detallado que funcionan junto con size-adjust. Actualmente, las propiedades ascent-override, descent-override y line-gap-override se implementan en Chromium 87 y versiones posteriores, y en Firefox 89 y versiones posteriores.

tijeras arriba y sopla las anulaciones de palabras, lo que demuestra las áreas a las que se pueden recortar las funciones

ascent-override

Navegadores compatibles

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: No se admite.

Origen

El descriptor ascent-override define la altura sobre 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 sobre las letras mayúsculas A y O, mientras que el título azul se ajustó para que su altura de mayúsculas se ajuste perfectamente al cuadro de límite general.

descent-override

Navegadores compatibles

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: No se admite.

Origen

El descriptor descent-override define la altura 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 sus líneas de base de D y O, mientras que el título azul se ajustó para que sus letras se ajusten a la línea de base.

line-gap-override

Navegadores compatibles

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: No se admite.

Origen

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

@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, en esencia, está en 0%, mientras que el título azul se ajustó un 50% hacia arriba, lo que crea espacio sobre y 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 de límite de texto seguro de la Web. Puedes personalizar el cuadro de texto para una presentación precisa.

Conclusión

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

Foto de Kristian Strand en Unsplash