Resumen
En este artículo, se analizan en profundidad los resguardos de fuentes y las APIs de size-adjust
, ascent-override
, descent-override
y line-gap-override
. Estas API permiten usar fuentes locales para crear caras de fuente de resguardo que coincidan de manera cercana o exacta con las dimensiones de una fuente web. Esto reduce o elimina los cambios de diseño causados por el intercambio de fuentes.
Si prefieres omitir la lectura de este artículo, estas son algunas de las herramientas que puedes usar para comenzar a usar estas APIs de inmediato:
Herramientas del marco de trabajo:
- @next/font: A partir de Next 13,
next/font
usa automáticamente anulaciones de métricas de fuentes ysize-adjust
para proporcionar resguardos de fuentes coincidentes. - @nuxtjs/fontaine: A partir de Nuxt 3, puedes usar
nuxt/fontaine
para generar automáticamente y, luego, insertar resguardos de fuentes coincidentes en las hojas de estilo que usa tu app de Nuxt.
Herramientas ajenas al framework:
- Fontaine: Fontaine es una biblioteca que genera e inserta automáticamente resguardos de fuentes que usan anulaciones de métricas de fuente.
- Este repositorio contiene las anulaciones de métrica de fuente para todas las fuentes alojadas en Google Fonts. Estos valores se pueden copiar y pegar en las hojas de estilo.
Información general
Una fuente de resguardo es un tipo de fuente que se usa cuando el tipo de fuente principal aún no se cargó o carecen de los glifos necesarios para procesar el contenido de la página. Por ejemplo, el CSS que aparece a continuación indica que la familia de fuentes sans-serif
debe usarse como resguardo de fuentes para "Roboto"
.
font-family: "Roboto" , sans-serif;
Las fuentes de resguardo se pueden usar para renderizar texto más rápidamente (es decir, con font-display: swap
). Como resultado, el contenido de la página se puede leer y usar antes. Sin embargo, históricamente, esto tuvo el costo de la inestabilidad del diseño: los cambios de diseño suelen ocurrir cuando se cambia una fuente de resguardo por la fuente web. Sin embargo, las nuevas API que se analizan a continuación pueden reducir o eliminar este problema, ya que posibilitan la creación de caras de fuentes de resguardo que ocupen la misma cantidad de espacio que su contraparte de fuentes web.
Resguardos de fuentes mejorados
Existen dos enfoques posibles para generar resguardos de fuentes "mejorados". El enfoque más simple usa solo la métrica de fuente que anula la API. El enfoque más complicado (pero más potente) usa la métrica de fuente anula la API y size-adjust
. En este artículo, se explican ambos enfoques.
Cómo funcionan las anulaciones de métricas de fuente
Introducción
Las anulaciones de métricas de fuente proporcionan una forma de anular el ascenso, el descenso y el interlineado de una fuente:
- La función Ascenso mide la distancia más larga que se extienden los glifos de una fuente por encima de la línea de base.
- Descenso mide la distancia más larga que se extienden los glifos de una fuente por debajo de la línea de base.
- El intervalo de línea, también llamado "inicial", mide la distancia entre las líneas sucesivas de texto.
Las anulaciones de métricas de fuente se pueden usar para anular el ascenso, el descenso y el interlineado de una fuente de resguardo a fin de que coincida con el ascenso, el descenso y el interlineado de la fuente web. Como resultado, la fuente web y la fuente de resguardo ajustada siempre tendrán las mismas dimensiones verticales.
Las anulaciones de métricas de fuente se usan en una hoja de estilo como la siguiente:
body {
font-family: Poppins, "fallback for poppins";
}
@font-face {
font-family: "fallback for poppins";
src: local("Times New Roman");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Las herramientas que se mencionan al comienzo de este artículo pueden generar los valores correctos de anulación de la métrica de fuente. Sin embargo, también puedes calcular estos valores tú mismo.
Calcula las anulaciones de métricas de fuente
Las siguientes ecuaciones generan las anulaciones de métricas de fuente para una fuente web determinada. Los valores de las anulaciones de métricas de fuente se deben escribir como porcentajes (por ejemplo, 105%
) en lugar de decimales.
ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm
Por ejemplo, estas son las anulaciones de métricas de fuente para la fuente Poppins:
/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/
ascent-override: 105%; /* = 1050/1000 */
descent-override: 35%; /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */
Los valores de ascent
, descent
, line-gap
y unitsPerEm
provienen de los metadatos de la fuente web. En la siguiente sección de este artículo, se explica cómo obtener estos valores.
Cómo leer tablas de fuentes
Los metadatos de una fuente (específicamente, sus tablas de fuentes) contienen toda la información que necesitarás para calcular sus anulaciones de métricas de fuente.
A continuación, se incluyen algunas herramientas que puedes usar para leer los metadatos de una fuente:
- fontkit es un motor de fuentes compilado para Node.js. En este fragmento de código, se muestra cómo usar fontkit para calcular anulaciones de métricas de fuentes.
- Capsize es una biblioteca de diseño y tamaño de fuente. Capsize proporciona una API para obtener información sobre varias métricas de fuente.
- fontdrop.info es un sitio web que te permite ver tablas de fuentes y otra información relacionada con ellas desde el navegador.
- Font Forge es un editor de fuentes popular para computadoras de escritorio. Para ver
ascent
,descent
yline-gap
, abre el diálogoFont Info
, selecciona el menúOS/2
y, luego, la pestañaMetrics
. Para verUPM
, abre el diálogoFont Info
y selecciona el menúGeneral
.
Información sobre las tablas de fuentes
Tal vez observes que varias métricas hacen referencia a conceptos como “ascenso”, por ejemplo, hay métricas hheaAscent
, typoAscent
y winAscent
. Esto se debe a que diferentes sistemas operativos adoptan diferentes enfoques para el procesamiento de fuentes: los programas en dispositivos OSX generalmente usan métricas de fuente hhea*
, mientras que los programas en dispositivos con Windows suelen usar métricas de fuente typo*
(también conocido como sTypo*
) o win*
.
Según la fuente, el navegador y el sistema operativo, se renderizará una fuente con las métricas hhea
, typo
o win
.
Mac | Windows | |
Chromium | Usa las métricas de la tabla "hhea". | Usa las métricas de la tabla “typo” si se configuró “USE_TYPO_METRICS”; de lo contrario, usa las métricas de la tabla “win”. |
Firefox | Usa las métricas de la tabla "typo" si se configuró "USE_TYPO_METRICS"; de lo contrario, usa las métricas de la tabla "hhea". | Usa las métricas de la tabla “typo” si se configuró “USE_TYPO_METRICS”; de lo contrario, usa las métricas de la tabla “win”. |
Safari | Usa las métricas de la tabla "hhea". | Usa las métricas de la tabla “typo” si se configuró “USE_TYPO_METRICS”; de lo contrario, usa las métricas de la tabla “win”. |
Para obtener más información sobre cómo funcionan las métricas de fuente en los diferentes sistemas operativos, consulta este artículo sobre las métricas verticales.
Compatibilidad multidispositivo
En la gran mayoría de las fuentes (por ejemplo, alrededor del 90% de las fuentes alojadas en Google Fonts), las anulaciones de métricas de fuentes se pueden usar de forma segura sin conocer el sistema operativo del usuario: en otras palabras, para estas fuentes, los valores de ascent-override
, descent-override
y linegap-override
permanecen exactamente iguales, independientemente de si se aplican las métricas hhea
, typo
o win
. Este repositorio brinda información sobre las fuentes a las que se aplica y a las que no.
Si utilizas una fuente que requiere el uso de conjuntos independientes de anulaciones de métricas de fuente para dispositivos OSX y Windows, solo se recomienda usar anulaciones de métricas de fuente y size-adjust
si puedes modificar las hojas de estilo en función del sistema operativo del usuario.
Cómo usar anulaciones de métricas de fuente
Debido a que las anulaciones de métricas de fuente se calculan usando medidas que provienen de los metadatos de la fuente web (y no de la fuente de reserva), estas se mantienen iguales independientemente de la fuente que se use como fuente de resguardo. Por ejemplo:
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: "fallback for Poppins";
src: local("Arial");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: "another fallback for Poppins";
src: local("Roboto");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Cómo funciona el ajuste de tamaño
Introducción
El descriptor de CSS size-adjust
ajusta de forma proporcional el ancho y la altura de los glifos de fuente. Por ejemplo, size-adjust: 200%
ajusta los glifos de la fuente al doble de su tamaño original; size-adjust: 50%
ajusta los glifos de la fuente a la mitad de su tamaño original.
Por sí misma, size-adjust
tiene aplicaciones limitadas para mejorar los resguardos de fuentes: en la mayoría de los casos, la fuente de resguardo se debe reducir o ampliar ligeramente (en lugar de ajustar su escala de manera proporcional) para que coincida con una fuente web. Sin embargo, la combinación de size-adjust
con anulaciones de métricas de fuentes permite hacer que dos fuentes coincidan en sentido horizontal y vertical.
Se usa size-adjust
en las hojas de estilo de la siguiente manera:
@font-face {
font-family: "fallback for poppins";
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
Debido a la forma en que se calcula size-adjust
(que se explica en la siguiente sección), el valor de size-adjust
(y las anulaciones de la métrica de fuente correspondiente) cambia según la fuente de resguardo que se use:
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Cómo calcular anulaciones de métricas de fuente y ajuste de tamaño
Estas son las ecuaciones para calcular las anulaciones de métricas de fuente y size-adjust
:
size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)
La mayoría de estas entradas (es decir, el ascenso, el descenso y el intervalo) se pueden leer directamente desde los metadatos de la fuente web. Sin embargo, avgCharacterWidth
debe ser aproximada.
Ancho aproximado de caracteres promedio
En general, el ancho promedio de los caracteres solo puede ser aproximado, pero hay algunas situaciones en las que esto se puede calcular con exactitud; por ejemplo, cuando se usa una fuente monoespacio o cuando el contenido de una string de texto se conoce de antemano.
Un ejemplo de un enfoque simple para calcular avgCharacterWidth
es tomar el ancho promedio de todos los caracteres [a-z\s]
.
Sin embargo, es probable que, al ponderar todos los caracteres por igual, se reduzca el ancho de las letras que se usan con frecuencia (por ejemplo, e
) y el ancho de las letras que se usan con poca frecuencia (por ejemplo, z
).
Un enfoque más complejo que mejora la precisión es tener en cuenta la frecuencia de las letras y, en su lugar, calcular el ancho promedio ponderado por frecuencia de [a-z\s]
caracteres. Este artículo es una buena referencia para la frecuencia de las letras y la longitud promedio de las palabras de los textos en inglés.
Cómo elegir un enfoque
Los dos enfoques que se analizan en este artículo tienen sus ventajas y desventajas:
Usar por sí solas anulaciones de métricas de fuentes es un buen enfoque que puedes usar si estás comenzando a optimizar tus resguardos de fuentes. Si bien este es el más simple de los dos enfoques, suele ser lo suficientemente potente como para reducir notablemente la magnitud de los cambios de diseño relacionados con la fuente.
Por otro lado, si deseas mayor precisión y deseas realizar un poco más de trabajo y pruebas, incorporar
size-adjust
es un buen enfoque de uso. Si se implementa de forma correcta, este enfoque puede eliminar de manera eficaz los cambios de diseño relacionados con la fuente.
Cómo elegir fuentes de resguardo
Las técnicas que se describen en este artículo se basan en el uso de anulaciones de métricas de fuentes y size-adjust
para transformar las fuentes locales ampliamente disponibles, en lugar de intentar encontrar una fuente local que se aproxime más a la fuente web. Cuando elijas fuentes locales, es importante tener en cuenta que muy pocas fuentes tienen disponibilidad local generalizada y no existirá una sola fuente en todos los dispositivos.
Arial
es la fuente de resguardo recomendada para fuentes Sans Serif y Times New Roman
es la fuente de resguardo recomendada para fuentes serif. Sin embargo, ninguna de estas fuentes está disponible en Android (Roboto
es la única fuente del sistema en Android).
En el siguiente ejemplo, se usan tres fuentes de resguardo para garantizar una cobertura amplia del dispositivo: una fuente alternativa que se orienta a dispositivos Windows/Mac, una fuente de resguardo que se orienta a dispositivos Android y una fuente de resguardo que usa una familia de fuentes genérica.
body {
font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}
/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Solicitud de comentarios
Comunícate con nosotros si tienes comentarios sobre tu experiencia con las anulaciones de métricas de fuente y size-adjust
.