A medida que se carga una fuente web, ahora puede ajustar su escala para normalizar los tamaños de fuente del documento y evitar cambios de diseño al cambiar de fuente
Ten en cuenta lo siguiente:
demostración
donde font-size
es una 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 esta publicación, se explora un nuevo tipo de fuente de CSS
descriptor 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 representación de la fuente web para evitar
cambio de diseño acumulado (CLS).
A continuación, presentamos una demostración interactiva del el 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 discordantes
- Mover las áreas de destino interactivas (el menú desplegable salta de un lado a otro)
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
. - Usa
size-adjust
para aumentar cada glifo al 150% de su tamaño predeterminado. - Afecta solo al 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 pequeño ejemplo con un solo título y el problema es muy notorio.
Para mejorar la representación de la fuente, una excelente técnica es la fuente o intercambio. 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 ofrece lo mejor de ambos mundos: el contenido será visible lo antes posible, y obtendrás una página con un buen estilo sin sacrificar el tiempo del usuario para crear contenido. No obstante, el problema es que a veces cuando se carga la fuente web, cambia toda la página, ya que se presenta un tamaño de altura de caja ligeramente diferente.
Cuando se agrega size-adjust
en la regla @font-face
, se establece un glifo global.
para el tipo de fuente. Si se hace correctamente, se producirá un cambio visual mínimo, un cambio sin problemas. Para hacer un intercambio fluido, ajústalo a mano o prueba esto
tamaño-ajuste
calculadora
de Malte Ubl.
Al comienzo de esta publicación, la solución del problema con el tamaño de fuente se solucionó a través de pruebas y
. Se introdujeron size-adjust
en el código fuente hasta el mismo encabezado en
Cookie
y Arial
renderizaron 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, determinas los objetivos de calibración para normalizar la fuente a gran escala. 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 a 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 al tamaño hacer coincidir una fuente remota src personalizada. Una fuente personalizada remota es el destino 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 antes de que se cargue una fuente personalizada para un 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. Este es excelentes noticias 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 cambiarlo 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.
ascent-override
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 un espacio sobre la letra A y la O mayúscula, mientras que el título azul se ajustó para que sea básico de altura se ajusta perfectamente al cuerpo cuadro de límite.
descent-override
El descriptor descent-override
define la altura debajo de la línea base de la
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
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 estas
recursos:
- Nivel 5 de fuentes CSS Especificaciones
- Ajuste de tamaño activado MDN
- Cambia sin problemas @font-face generador
- Cambio de diseño acumulado (CLS) en web.dev
- Una nueva forma de reducir el impacto de la carga de fuentes: Descriptores de fuentes de CSS
Foto de Kristian Strand en Unsplash