Aprovechar al máximo las fuentes variables en Google Fonts

He pasado los últimos años trabajando (junto a un grupo de personas súper talentosas) en una familia de fuentes llamada Recursive Sans Mono, ¡y acaba de lanzarse oficialmente en Google Fonts!

¿Quieres probarlo súper rápido? Aquí está el código de inserción para utilizar la familia de fuentes variables recursivas completa de Google Fonts (¡pero obtendrás mucha más flexibilidad y rendimiento si sigues leyendo!)

link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1display=swap" rel="stylesheet"

Comencé Recursive como un proyecto de tesis para un programa de maestría en diseño tipográfico en KABK TypeMedia, y cuando inicié mi fundición tipográfica, Arrow Type, Google Fonts me encargó terminar y lanzar Recursive como una fuente OFL de código abierto.

Puede ver Recursive y obtener más información sobre lo que puede hacer en recursive.design.

Recursive está diseñado para ser una familia de tipos flexibles tanto para sitios web como para código, cuyo objetivo principal es brindarles a los desarrolladores y diseñadores un tipo de letra divertido y útil para jugar, combinando una estética fresca con lo último en tecnología de fuentes.

Primero, una definición necesaria: las fuentes variables son archivos de fuentes que se ajustan a una variedad de estilos dentro de un archivo, generalmente de una manera que permite al usuario de la fuente seleccionar un estilo entre una gama fluida de estilos. Estos rangos estilísticos se denominan ejes variables y pueden ser parámetros, como el peso de la fuente, el ancho de la fuente, el tamaño óptico, la inclinación de la fuente o cosas más creativas. En el caso de Recursivo, puedes controlar el “Monoespaciado” (de Mono a Sans) y el “Informalidad” (entre un estilo normal y lineal y un estilo informal y con pincel). Cada familia tipográfica puede tener uno o más ejes propios y, como muchas características del tipo, los ejes variables son otra consideración de diseño para los diseñadores de fuentes.

Es posible que hayas visto que Google Fonts ha comenzado a agregar fuentes variables a su amplia colección. Es posible que haya leído acerca de algunas de las increíbles cosas que pueden hacer las fuentes variables. Pero es posible que no se dé cuenta de que muchas de las fuentes variables que vienen con Google Fonts (incluida la recursiva) tienen mucho más rango estilístico del que puede obtener desde la interfaz predeterminada de Google Fonts.

Debido a que Google Fonts tiene una amplia gama de usuarios, muchos de ellos nuevos en el desarrollo web, es comprensible que mantengan las cosas simples al mostrar solo el eje de “peso” para las fuentes variables. Pero, para fuentes como Recursive, esta simplificación en realidad deja de lado un montón de opciones. En la página recursiva, Google Fonts muestra a los visitantes ocho estilos, más un eje. Sin embargo, Recursive en realidad tiene 64 estilos preestablecidos (también llamados instancias con nombre) y un total de cinco ejes variables que puede ajustar (lo que representa una gran cantidad de estilos personalizados más potenciales).

Lo recursivo se puede dividir en lo que considera una de las cuatro “subfamilias”. La parte que muestra Google Fonts es la versión proporcional (sans-serif) más sencilla. Cada una de las cuatro subfamilias recursivas tiene un rango de pesos, además de cursiva, y se pueden clasificar como:

• Sans Linear: una fuente sans-serif proporcional de aspecto “normal”. Esto es lo que se muestra en el sitio web de Google Fonts.
• Sans Casual: una fuente proporcional “pincel casual”
• Mono Linear: una fuente monoespaciada “normal”
• Mono Casual: una fuente monoespaciada tipo “brush casual”

Probablemente sea mejor visualizar esto que describirlo con palabras. Aquí hay dos tablas (una para Sans y la otra para Mono) que muestran las 64 instancias nombradas:

Pero nuevamente, la interfaz principal de Google Fonts solo brinda acceso a ocho de esos estilos, más el eje Peso:

No muchas fuentes variables hoy en día tienen más que un eje de peso, por lo que esta es una elección de UX comprensible en cierto sentido. Aún así, espero que agreguen un poco más de flexibilidad en el futuro. Como diseñador de fuentes y fanático de la tipografía, ver el enfoque actual de solo peso se siente más como un aplanamiento artificial que como una verdadera simplificación, algo así como si Google Maps “simplificara” los mapas excluyendo cada camino que no fuera una autopista.

Afortunadamente, aún puedes acceder a todo el potencial de las fuentes variables alojadas en Google Fonts: conoce la API CSS de Google Fonts, versión 2. Echemos un vistazo a cómo puedes usar esto para sacar más provecho de Recursive.

Pero primero, resulta útil saber algunas cosas sobre cómo funcionan las fuentes variables.

Cómo funcionan las fuentes variables y por qué son importantes

Si alguna vez ha trabajado con fotografías en la web, entonces sabrá que nunca debe publicar un archivo JPEG de 9000 píxeles cuando una versión más pequeña es suficiente. Por lo general, puedes reducir una foto usando compresión para ahorrar ancho de banda cuando los usuarios la descargan.

Existen consideraciones similares para los archivos de fuentes. A menudo puedes reducir drásticamente el tamaño de una fuente subconjuntos de los caracteres incluidos en ella (un poco como recortar píxeles para dejar solo el área que necesitas). Puede comprimir aún más el archivo convirtiéndolo en un archivo WOFF2 (que es un poco como ejecutar un archivo de imagen rasterizada a través de una herramienta optimizadora como imageOptim). Los proveedores que alojan fuentes, como Google Fonts, a menudo hacen estas cosas automáticamente.

Ahora, piense en un archivo de vídeo. Si sólo necesitas mostrar los primeros 10 segundos de un vídeo de 60 segundos, puedes recortar los últimos 50 segundos para tener un archivo de vídeo mucho más pequeño.

Las fuentes variables son un poco como los archivos de video: tienen uno o más rangos de información (ejes variables) y, a menudo, se pueden recortar o "fijar" en una ubicación determinada, lo que ayuda a reducir el tamaño del archivo.

Por supuesto, las fuentes variables no se parecen en nada a los archivos de vídeo. Las fuentes registran la forma de cada letra en vectores (similar a cómo los SVG almacenan información de forma). Las fuentes variables tienen múltiples "ubicaciones de origen" que son como fotogramas clave en una animación. Para pasar de un estilo a otro, los puntos de control que componen las letras se interpolan matemáticamente entre sus diferentes ubicaciones de origen (también llamadas deltas). Una fuente puede tener muchos conjuntos de deltas (al menos uno por eje variable, pero a veces más). Entonces, para recortar una fuente variable, debe recortar los deltas innecesarios.

Como ejemplo específico, el eje Casual en Recursivo toma formas de letras de “Lineal” a “Casual” interpolando puntos de control vectorial entre dos extremos: básicamente, un dibujo normal y un dibujo con pincel. La animación del glifo comercial a continuación muestra la mecánica en acción: los puntos de control dibujan esquinas redondeadas en un extremo y cambian a esquinas cuadradas en el otro extremo.

Generalmente, cada eje agregado duplica la cantidad de dibujos que deben existir para que funcione una fuente variable. A veces el número es más o menos: el eje Peso de Recursivo requiere 3 ubicaciones (triplicando el número de dibujos), mientras que su eje Cursivo no requiere ubicaciones adicionales en absoluto, sino que en realidad solo activa diferentes glifos alternativos que ya existen en cada ubicación. Pero la matemática general es: si puedes cortar ejes innecesarios de una fuente variable, normalmente obtendrás un archivo más pequeño.

Cuando utiliza la API de Google Fonts, en realidad está optando por cada eje. De esta manera, en lugar de comenzar con un archivo grande y reducirlo, podrá elegir las piezas que desee.

Etiquetas de eje variable

Si va a utilizar la API de Google Fonts, primero necesita saber cómo etiquetar los ejes. Cada eje tiene un nombre completo y una abreviatura.

Estas abreviaturas de ejes tienen la forma de “etiquetas” de cuatro letras. Están en minúsculas para los ejes definidos por Microsoft y registrados en la especificación OpenType, y en mayúsculas para los ejes más nuevos inventados o definidos por otros (también se denominan ejes “personalizados” o “privados”). Hay esfuerzos para estandarizar algunos de estos nuevos ejes.

Actualmente hay cinco ejes estándar que una fuente puede incluir:

• wght– Peso, para controlar la ligereza y la audacia
• wdth– Ancho, para controlar el ancho total de la letra.
• opsz– Tamaño óptico, para controlar los ajustes del diseño para una mejor legibilidad en varios tamaños
• ital– Cursiva, generalmente para cambiar entre diseños verticales/cursiva separados.
• slnt– Inclinado, generalmente para controlar diseños verticales a inclinados con valores intermedios disponibles

Los ejes personalizados pueden ser casi cualquier cosa. Recursivo incluye tres de ellos: Monoespaciado ( MONO), Casual ( CASL) y Cursivo ( CRSV), además de dos ejes estándar wghty slnt.

Conceptos básicos de la API de fuentes de Google

Cuando configura una fuente incrustada desde la interfaz de Google Fonts, le proporciona un poco de HTML o CSS que incluye una URL y, en última instancia, esto llama a un documento CSS que incluye una o más @font-facereglas. Esto incluye cosas como nombres de fuentes y enlaces a archivos de fuentes en los servidores de Google.

Esta URL es en realidad una forma de llamar a la API de Google Fonts y tiene mucho más poder de lo que imagina. Tiene algunas partes básicas:

1. La URL principal, especificando la API ( https://fonts.googleapis.com/css2)
2. Detalles sobre las fuentes que solicita en uno o más familyparámetros
3. Una font-displaypropiedad para establecer un displayparámetro.

Como ejemplo, digamos que queremos el peso regular de Recursivo (en la subfamilia Sans Linear). Aquí está la URL que usaríamos con nuestro CSS @import:

@import url('https://fonts.googleapis.com/css2?family=Recursivedisplay=swap');

O podemos vincularlo en headnuestro HTML:

link href="https://fonts.googleapis.com/css2?family=Recursivedisplay=swap" rel="stylesheet"

Una vez que esté en su lugar, podemos comenzar a aplicar la fuente en CSS:

body {  font-family: 'Recursive', sans-serif;}

Hay un valor predeterminado para cada eje:

• MONO0 (Sin/proporcional)
• CASL0 (lineal/normal)
• wght400 (normales)
• slnt0 (vertical)
• CRSV0 (minúsculas romanas/no cursivas)

Elige tu aventura: estilos o ejes

La API de Google Fonts le ofrece dos formas de solicitar partes de fuentes variables:

1. Listado de ejes y los valores específicos no predeterminados que desea de ellos
2. Listado de ejes y los rangos que desea de ellos.

Obtener estilos de fuente específicos

Los estilos de fuente se solicitan agregando parámetros a la URL de Google Fonts. Para mantener los valores predeterminados en todos los ejes pero usar un estilo Casual, puede realizar la consulta Recursive:CASL@1(esto servirá para Recursive Sans Casual Regular). Para convertir ese Recursivo Mono Casual Regular, especifique dos ejes antes de @y luego sus respectivos valores (pero recuerde, los ejes personalizados tienen etiquetas en mayúsculas):

https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1display=swap

Para solicitar tanto Regular como Negrita, simplemente actualizaría la llamada de familia a Recursive:wght@400;700, agregando el wghteje y los valores específicos:

https://fonts.googleapis.com/css2?family=Recursive:wght@400;700display=swap

Algo muy útil de Google Fonts es que puede solicitar varios estilos individuales a la API y, siempre que sea posible, ofrecerá fuentes variables que cubran todos esos estilos solicitados, en lugar de archivos de fuentes separados para cada estilo. Esto es cierto incluso cuando solicita ubicaciones específicas, en lugar de rangos de ejes variables; si pueden entregar un archivo de fuente más pequeño para su solicitud de API, probablemente lo harán.

Como las fuentes variables se pueden recortar de manera más flexible y eficiente en el futuro, los archivos servidos para determinadas solicitudes de API probablemente se volverán más inteligentes con el tiempo. Por lo tanto, para los sitios de producción, puede ser mejor solicitar exactamente los estilos que necesita.

Sin embargo, lo interesante es que también puedes solicitar ejes variables. Eso le permite conservar mucha flexibilidad de diseño sin cambiar sus solicitudes de fuente cada vez que desee utilizar un nuevo estilo.

Obtener una fuente variable completa con la API de Google Fonts

La API de Google Fonts busca reducir el tamaño de las fuentes haciendo que los usuarios opten por solo los estilos y ejes que deseen. Pero, para obtener todos los beneficios de las fuentes variables (más flexibilidad de diseño en menos archivos), debe utilizar uno o más ejes. Entonces, en lugar de solicitar estilos únicos con Recursive:wght@400;700, puede solicitar ese rango completo con Recursive:wght@400..700(cambiando de a ;para ..indicar un rango), o incluso extender al rango de peso recursivo completo con Recursive:wght@300..1000(lo que agrega muy poco tamaño de archivo, pero mucho de diseño extra).

Puede agregar ejes adicionales enumerándolos alfabéticamente (primero los ejes estándar en minúsculas y luego los ejes personalizados en mayúsculas) antes de @ y luego especificando sus valores o rangos en el mismo orden. Por ejemplo, para agregar el eje MONO y el eje de peso, puede usarlo Recursive:wght,MONO@300..1000,0..1como consulta de fuente.

O, para obtener la fuente variable completa, puede utilizar la siguiente URL:

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1display=swap

Por supuesto, aún necesitas poner eso en un enlace HTML, como este:

link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1display=swap" rel="stylesheet"

Personalizándolo aún más para equilibrar la flexibilidad y el tamaño del archivo

Si bien puede resultar tentador utilizar cada eje de una fuente variable, vale la pena recordar que cada eje adicional aumenta el tamaño general de los archivos. Por lo tanto, si realmente no espera utilizar un eje, tiene sentido dejarlo fuera. Siempre puedes agregarlo más tarde.

Supongamos que desea los estilos Mono Casual de Recursive en una variedad de pesos, podría hacer:

link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000display=swap" rel="stylesheet"

Lo anterior ya no funciona. Tal vez fue una función beta o tal vez simplemente cambió la sintaxis. No dude en contactarnos si sabe más.

Puede agregar varias familias de fuentes a una llamada API con familyparámetros adicionales. Sólo asegúrese de que las fuentes estén ordenadas alfabéticamente por apellido.

link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900?family=Recursive:CASL,MONO,wght@1,1,300..1000display=swap" rel="stylesheet"

Usar fuentes variables

Todos los ejes estándar se pueden controlar con propiedades CSS existentes. Por ejemplo, si tiene una fuente variable con un rango de peso, puede especificar un peso específico con font-weight: 425;. Todos los ejes se pueden controlar con font-variation-settings. Entonces, si quieres un estilo Mono Casual muy pesado de Recursivo (suponiendo que hayas llamado a la familia completa como se muestra arriba), puedes usar el siguiente CSS:

body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1;}

Algo bueno que debes saber: font-variation-settingses mucho más agradable de usar junto con las propiedades personalizadas de CSS.

Puede leer más detalles sobre el diseño con fuentes variables en VariableFonts.io y en la excelente colección de artículos CSS-Tricks sobre fuentes variables.

Notas nerd sobre el rendimiento de las fuentes variables

Si usara los 64 estilos preestablecidos de Recursivo como archivos WOFF2 separados (con su conjunto de caracteres completo, sin subconjunto), sería un total de aproximadamente 6,4 MB. Por el contrario, podrías tener esa gama estilística (y todo lo demás) en sólo 537 KB en una fuente variable. Por supuesto, esa es una comparación ligeramente absurda: casi nunca usarías 64 estilos en una sola página web, especialmente no con sus conjuntos de caracteres completos (y si lo haces, deberías usar subconjuntos con rango Unicode).

Una mejor comparación es recursiva con un rango de eje versus estilos dentro de ese rango de eje. En mis pruebas, un archivo WOFF2 recursivo que es un subconjunto del conjunto de caracteres "Google Fonts Latin Basic" (que incluye solo caracteres para cubrir los idiomas inglés y de Europa occidental), incluido el rango de peso completo de 300 a 1000 (y todos los demás ejes "fijados" a sus valores predeterminados) es de 60 KB. Mientras tanto, un único estilo con el mismo subconjunto ocupa 25 KB. Entonces, si usa solo tres pesos de Recursivo, puede ahorrar alrededor de 15 KB usando la fuente variable en lugar de archivos individuales .

La fuente variable completa como subconjunto WOFF2 registra 281 KB, lo cual es mucho para una fuente, pero no tanto si lo comparas con el peso de una imagen JPEG grande. Por lo tanto, si asume que los estilos individuales pesan aproximadamente 25 KB, si planea usar más de 11 estilos, sería mejor que usara la fuente variable.

Este tipo de matemáticas es principalmente un ejercicio académico por dos grandes razones:

1. Las fuentes variables no se tratan solo del tamaño del archivo. La ventaja mucho mayor es que te permiten simplemente diseñar, eligiendo los pesos de fuente exactos (u otros estilos) que desees. ¿Una fuente parece demasiado clara? Aumente un font-weightpoco, diga desde 400hasta 425!
2. Más importante aún (como se explicó anteriormente), si solicita estilos de fuente variables o ejes de Google Fonts, ellos se encargan del trabajo pesado por usted, enviando las fuentes que consideren más eficaces y útiles según su solicitud de API y los navegadores a los que acceden los visitantes. su sitio desde.

Por lo tanto, realmente no es necesario descargar las fuentes que devuelve la API de Google Fonts para comparar el tamaño de sus archivos. Aún así, vale la pena comprender las ventajas y desventajas generales para poder decidir mejor cuándo optar por los ejes variables y cuándo limitarse a un par de estilos.

¿Que sigue?

¡Enciende CodePen y prueba la API! Para CodePen, probablemente querrás usar la @importsintaxis CSS, como esta en el panel CSS:

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,wght@0..1,0..1,0..1,-15..0,300..1000display=swap');

Aparentemente es mejor utilizar la sintaxis de enlace HTML para evitar bloquear descargas paralelas de otros recursos. En CodePen, abrirías la configuración del lápiz, seleccionarías HTML y luego soltarías linkla configuración del encabezado HTML.

O bien, puedes simplemente bifurcar mi CodePen y experimentar allí:

Tome un atajo de configuración de API

Si desea evitar la complejidad de determinar las llamadas API exactas y desea optar por los ejes variables de Recursive y realizar llamadas API semi-avanzadas, he creado una herramienta de configuración simple en el minisitio Recursive (haga clic en "Obtener recursivo" botón). Esto le permite seleccionar rápidamente estilos fijados o rangos de variables que desea utilizar, e incluso proporciona estimaciones para el tamaño del archivo resultante. Pero esto sólo expone algunas de las funciones de la API y puede ser más específico si lo desea. Es mi intento de lograr que las personas utilicen el rango más estilístico en los archivos más pequeños, teniendo en cuenta las limitaciones actuales de la creación de instancias de fuentes variables.

Utilice recursivo para el código

Además, Recursive en realidad se diseñó primero como una fuente para usar en código. Puede usarlo en CodePen a través de la configuración de su cuenta. Mejor aún, puede descargar y utilizar la última versión recursiva de GitHub y configurarla en cualquier editor de código.

¡Explora más fuentes!

El documento API de Google Fonts incluye de manera útil una lista (parcial) de fuentes variables junto con detalles sobre sus rangos de ejes disponibles. Algunos de mis favoritos con ejes más allá del peso son Encode Sans ( wdth, wght) e Inter ( slnt, wght). También puede filtrar Google Fonts para mostrar solo fuentes variables, aunque la mayoría de estos resultados solo tienen un eje de Peso (aún interesante y útil, pero no necesita una configuración de URL personalizada).

Algunas fuentes variables más sorprendentes llegarán a Google Fonts. Algunos que espero especialmente con ansias son:

• Fraunces: “Un tipo de letra de serifa suave “Old Style” inspirado en los gestos de los tipos de letra de principios del siglo XX, como Windsor, Souvenir y Cooper Series”.
• Roboto Flex: Como Roboto, pero con amplios rangos de Peso, Ancho y Tamaño Óptico
• Crispy: una fuente de visualización variable creativa, angular y súper flexible
• Science Gothic: un sans cuadrado “basado estrechamente en Bank Gothic, un tipo de letra de principios de la década de 1930, pero se han agregado minúsculas, ejes de diseño y cobertura del idioma”
• Comisionado: Una sans-serif humanista de bajo contraste con proporciones casi clásicas con tres “voces” con tallos que pueden ser rectos, acampanados o acuñados.

Y sí, puedes descargar y alojar estas fuentes por tu cuenta si quieres usarlas en tus proyectos hoy. ¡Pero estad atentos a Google Fonts para conocer más tipos de letra increíblemente flexibles!

Por supuesto, el mundo de la tipografía es mucho más grande que las fuentes de código abierto. Hay un montón de fundiciones tipográficas increíbles que trabajan en fuentes interesantes que traspasan los límites, y muchas de ellas también están explorando nuevos territorios interesantes en fuentes variables. Muchos tienden a adoptar otros enfoques para la concesión de licencias, pero para el proyecto correcto, un buen tipo de letra puede tener un valor extremadamente bueno (obviamente soy parcial, pero para un argumento simple, basta con mirar cuánto fortalece la tipografía a marcas como Apple, Stripe, Google, IBM, Figma, Slack y muchos más). Si quieres deleitarte con más posibilidades y aún no conoces estos nombres, definitivamente echa un vistazo a DJR , OHno , Grilli , XYZ , Dinamo , Typotheque , Underware , Bold Monday y los muchos proyectos WIP muy divertidos en Future. Fuentes . (He omitido muchas otras fundiciones increíbles, pero cada una de ellas ha hecho cosas que me encantan particularmente, y este no es un directorio de fundiciones tipográficas ).

Finalmente, algunos comentarios descarados para mí: si desea apoyarme a mí y a mi trabajo más allá de Recursive, considere consultar mi versátil sans-serif WIP Name Sans, suscribirse a mi (muy) poco frecuente boletín informativo y seguirme. en Instagram.