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.
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. Los ejemplos de la derecha usan size-adjust
para garantizar que 64px
sea el tamaño final coherente.
En esta publicación, se explora un nuevo descriptor de fuente de CSS 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 la optimización de la renderización de fuentes web para evitar el cambio de diseño acumulativo (CLS).
Esta es una demostración interactiva del espacio del problema. Intenta cambiar el tipo de letra con el menú desplegable y observa lo siguiente:
- Las diferencias de altura en los resultados.
- Cambios de contenido visualmente molestos
- Áreas de destino interactivas en movimiento (el menú desplegable salta).
Cómo ajustar el tamaño de 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');
}
- Crea un tipo de letra personalizado llamado
Adjusted Typeface
. - Utiliza
size-adjust
para escalar verticalmente cada glifo al 150% de su tamaño predeterminado. - Solo afecta al único tipo de letra importado.
Usa el tipo de letra personalizado anterior de la siguiente manera:
h1 {
font-family: "Adjusted Typeface";
}
Cómo mitigar 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 cambia la fuente. Este es solo un ejemplo pequeño con un solo elemento de título, y el problema es muy notorio.
Para mejorar la renderización de fuentes, una gran técnica es el intercambio de fuentes. Renderiza una fuente de 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 buen estilo sin sacrificar el tiempo del usuario para acceder 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 con una altura de cuadro un poco diferente.
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 cambio sin problemas. Para crear un intercambio fluido, realiza un ajuste manual o prueba la calculadora de ajuste de tamaño de Malte Ubl.
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
lo hizo 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');
}
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. También puedes ajustar las fuentes locales para que coincidan con lo que descargas.
Estrategias para la calibración de size-adjust
:
- Objetivo remoto:
Ajusta las fuentes locales según las fuentes descargadas. - Objetivo local:
Ajusta las fuentes descargadas en función de las fuentes de segmentación local.
Ejemplo 1: Destino remoto
Considera el siguiente fragmento, que ajusta una fuente disponible localmente para que coincida con una fuente remota src personalizada. El destino de la calibración es una fuente personalizada remota, que puede ser 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 antes de que se cargue una fuente personalizada para lograr 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.
La calculadora de Malte también sirve para tener un tipo de letra de marca como objetivo. 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 la fuente personalizada de una 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 renderizarla sin ningún ajuste y, luego, ajustar las fuentes entrantes para que coincidan.
Un ajuste más detallado 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.
ascent-override
El descriptor ascent-override
define la altura sobre la 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 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
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 la D y la O, mientras que el título azul se ajustó para que las letras se ajusten a la línea de base.
line-gap-override
El descriptor line-gap-override
define la métrica de espacio entre líneas para la fuente.
Se trata del intervalo de líneas recomendado o el interlineado externo recomendado.
@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 está en 0%
, mientras que el título azul se ajustó en un 50%, lo que crea espacio por encima 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 de CSS @font-face
size-adjust
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:
- Especificación de fuentes de CSS de nivel 5
- Ajuste de tamaño en MDN
- Generador de @font-face para el intercambio sin problemas
- Cambio de diseño acumulado (CLS) en web.dev
- Una nueva forma de reducir el impacto de la carga de fuentes: Descriptores de fuentes CSS
Foto de Kristian Strand en Unsplash