Smashing Podcast Episodio 5 con Jason Pamental: ¿Qué son las fuentes variables?

Cada dos semanas, publicamos un podcast en el que hablo con alguien de la industria web sobre un tema diferente. En este episodio, ¡aprendamos todo lo relacionado con las fuentes variables! Hablo con una fuente de conocimiento al respecto, Jason Pamental.

Mostrar notas

Actualización semanal

• “Sistemas de ilustración de marca: dibujando una fuerte identidad visual”, Yihui Liu
• “Luchando para controlar los aumentos repentinos de tráfico”, Suzanne Scacca
• "Creación de un diseño CSS: transmisión en vivo con Rachel Andrew", Rachel Andrew
• "Resumen de Adviento de diseño y desarrollo web para 2019", Rachel Andrew
• "¿Debe el sitio de su cartera ser una PWA?", Suzanne Scacca

Fuentes variables

• Encuentra a Jason en la web en rwt.io
• Boletín de noticias de tipografía web
• "Fuentes variables: lo que los autores web deben saber", Jason Pamental
• El libro de Ellen Lupton “Pensando con tipografía”
• Libro de Erik Spiekermann “Deja de robar ovejas y descubre cómo funciona la tipografía”

Transcripción

Drew McLellan: es estratega de diseño, líder de UX, tecnólogo, experto en tipografía web y experto invitado en el grupo de trabajo de fuentes web del W3C. Escribe, habla y trabaja con equipos y propietarios de marcas sobre cómo configurar mejor el tipo de letra en las plataformas digitales. Ha hablado con organizaciones como Adobe, Audible, Conde Nast, GoDaddy, IBM y ha dado presentaciones, talleres y conferencias en todo el mundo. Su boletín, Web Typography News, es popular entre aquellos que buscan las últimas actualizaciones y consejos sobre tipografía en la web. Claramente es un experto en tipografía web. Pero, ¿sabías que representó a Suecia en Lawn Croquet en los Juegos Olímpicos de 1984? Mis grandes amigos, denle la bienvenida a Jason Pamental. Hola, Jasón. ¿Cómo estás?

Jason Pamental: Estoy genial. Sobre todo después de esa introducción.

Drew: Quería hablar contigo hoy, obviamente, sobre la tipografía web porque eso es realmente lo tuyo. Eres un auténtico experto en tipografía web. Sobre eso en general, pero en particular, hablemos un poco sobre las fuentes variables. Seré el primero en admitir que no soy un experto en tipografía. Quiero decir, por favor considérenme tan desinformado como cualquiera que esté escuchando. No puede patrocinarme con ninguna información sobre tipografía. Supongo que hemos tenido fuentes web utilizables en la web probablemente desde hace una década. ¿Está bien?

Jasón: Sí. En realidad, ¿no fuiste tú quien comenzó algo en Twitter hace un par de días? Fue como el 9 de noviembre de 2009. Hace como 10 años en dos días desde que se lanzó Typekit. Sé que Font Deck tenía razón en el mismo marco de tiempo. Luego Google Fonts y Monotype Service no mucho después. Recibí una invitación beta que me dio mi amigo, John Cianci, quien en realidad ahora sigue siendo un colega de mi esposa en la agencia donde trabaja para Typekit en algún momento de 2009. Esa fue una reinvención completa de mi interés en la web. . Quiero decir, fue nada menos que una revolución para mí. Quiero decir, siempre me encantó la tipografía cuando la estudié en la escuela, pero no pudimos hacer nada con ella en la web durante 15 años. Eso fue bastante sorprendente.

Drew: Debe haber diseñadores trabajando en la web que hayan tenido fuentes web durante más de 10 años potencialmente. Hay diseñadores que trabajan en la web ahora que nunca han diseñado un sitio sin la capacidad de seleccionar entre una amplia gama de tipos de letra.

Jasón: Sí, es verdad. Nadie sin esa experiencia tuvo que empujar los píxeles cuesta arriba en ambas direcciones como lo hicimos cuando crecíamos. No somos unos viejos malhumorados agitando los puños hacia el cielo. Pero sí, es increíble con todas las cosas que han cambiado en la web, la idea de que algunas personas nunca experimentaron de otra manera es notable.

Drew: Cuando obtuvimos las fuentes web, fue un cambio enorme en la forma en que comenzamos a usar la tipografía en la web porque realmente podíamos comenzar a usar la tipografía en la web. Obviamente, había cosas que podíamos hacer con fuentes web seguras, pero estábamos bastante limitados a una paleta muy restringida. Pero potencialmente ahora hay otro gran cambio casi tan significativo quizás con fuentes variables. Quiero decir, ¿qué son las fuentes variables? ¿Qué hacen por nosotros? ¿Por dónde empezamos?

Jason: Siempre trato de comenzar dando a las personas un marco de referencia. Entonces, cuando pensamos en usar fuentes en la web, lo que debemos recordar es que actualmente con las fuentes "tradicionales", cada fuente tiene un ancho, peso, inclinación y variante individual de ese tipo de letra. Por cada uno que queramos usar en la web, tenemos que cargar un archivo. Para un sitio web típico donde lo usa para el cuerpo del texto, generalmente carga cuatro fuentes: normal, negrita, cursiva y negrita cursiva. Todas esas cosas tienen que cargarse. Cada uno de ellos es un poco de información que debe descargarse, procesarse y renderizarse.

Jason: Por lo general, lo que hemos hecho a lo largo de los años es limitarnos a usar esa cantidad muy pequeña de fuentes, lo que en realidad no es una práctica tipográfica particularmente buena. Es mucho más común en el diseño gráfico utilizar una gama mucho más amplia. Puede usar ocho o 10 pesos y variantes diferentes de un tipo de letra en un diseño determinado. En la web, hemos estado muy limitados debido al rendimiento. La gran diferencia en una fuente variable son todas esas permutaciones, esas variaciones están contenidas en un solo archivo. Ese formato es realmente eficiente porque lo que está haciendo es almacenar la forma regular de ese carácter y luego lo que se llama los deltas de dónde se moverían los puntos a lo largo de esas curvas para representarlo en negrita o delgado o ancho o angosto.

Jason: Entonces, al almacenar solo las diferencias, no tienes que almacenar todo el contorno. Es un formato mucho más eficiente. Si bien no es tan pequeño como un solo archivo de fuente, sigue siendo mucho más pequeño que todos los archivos individuales tomados por separado. Si observa algo como Plex Sans de IBM, todos esos archivos separados pueden tener casi un megabyte donde dos archivos de fuentes variables que contienen todos los anchos y pesos en la posición vertical en un archivo, la cursiva en el otro es como 230K. Eso es para conjuntos de personajes muy, muy completos. La mayoría de la gente podría usar un subconjunto de eso y hacerlo aún más pequeño. En general, he estado viendo esos tamaños de archivo alrededor de 50 a 100 K para una necesidad típica de sitio web en idioma occidental. Eso no es tan diferente de cargar... Una vez que carga tres o cuatro archivos de fuentes individuales, probablemente esté cargando más datos que eso. Es una ganancia interesante para el rendimiento, pero también abre toda la gama del tipo de letra para que la usemos en la web a través de CSS.

Drew: Es casi como entregar la receta en lugar de la comida. En lugar de aquí está la versión en cursiva, aquí está la versión en negrita. Es como, "Aquí está la versión regular y para ponerlo en cursiva, harías esto, para ponerlo en negrita, harías aquello". Eso reduce el tamaño del archivo que baja por el cable.

Jasón: Sí. Bueno, en cierto modo, te está dando todos los ingredientes y luego puedes hacer la receta que quieras. Porque realmente podrías ir a todas partes desde... Volviendo al ejemplo de Plex, de 100 a 700 de peso donde 700 es una especie de negrita típica, 400 sería una especie de peso normal. Pero luego tienes mucho más ligero. Por lo tanto, podría hacer encabezados de línea muy grandes y muy finos o citas en bloque o diferentes elementos o énfasis, y luego ser capaz de modular lo que desea que esté en negrita en diferentes tamaños. Hay todo tipo de cosas diferentes que puede hacer para obtener una mejor tipografía, una mejor experiencia de usuario y, al mismo tiempo, obtener un mejor rendimiento. Ese es el portero.

Drew: ¿Entonces hay casi un número infinito de ajustes de pasos entre lo que hoy consideraríamos regular y audaz? ¿Realmente tienes la capacidad de ir a cualquier parte a lo largo de ese eje para ajustar entre los dos?

Jasón: Correcto. Lo que creo que es realmente emocionante para mí como alguien que estudió diseño gráfico y ha observado de cerca el diseño de impresión durante muchos años, la idea de lo que realmente es la negrita debería cambiar según el tamaño del texto que se está representando. Entonces, de forma predeterminada, 400 y 700 para normal y negrita es lo que la web tiene por defecto. Pero en verdad, la única razón por la que llamas negrita es porque quieres algo de énfasis, quieres que algo se destaque. Pero cuanto más pesada se vuelve la fuente de un tamaño pequeño, más difícil es de leer. De alguna manera llena los pequeños espacios abiertos. En lugar de usar 700 para el texto del cuerpo cuando está configurado en ese tamaño de aproximadamente 16 píxeles o lo que sea que estemos usando allí, usa tal vez 550, 575 donde obtiene suficiente énfasis pero las formas de las letras aún son más abiertas. Luego, a medida que crece, puede usar un peso más pesado.

Jason: Pero, de nuevo, es tu elección en ese momento. Al modular eso para obtener el nivel correcto de énfasis, pero manteniendo una muy buena legibilidad, tenemos mucha más flexibilidad. Realmente espero que a medida que estos se vuelvan más populares y más utilizados, podamos comenzar a enseñar a las personas a ser un poco más matizadas con la forma en que usan ese rango y, de hecho, volverse más expresivos y también más legibles al mismo tiempo. .

Drew: Una cosa que he notado al implementar diseños como interfaz y al implementar diseños que me han dado es que diferentes combinaciones de contraste de colores y texto claro sobre un fondo oscuro versus texto oscuro sobre fondo claro, los pesos pueden verse completamente diferentes. Entonces, presumiblemente, esto ayudaría a nivelar y perfeccionar la experiencia visual y de lectura en función de cambios como ese.

Jasón: Absolutamente. Esa es una de las cosas que generalmente mostraré en los talleres y charlas: agregar soporte para esa consulta de medios en modo ligero. Puedes cambiar ese contraste, pero luego quieres hacerlo de una manera matizada. Dependiendo del tipo de letra, puede terminar pareciendo muy pesado o un poco delgado con un tipo de letra serif. A veces, desea ir un poco más pesado o un poco más ligero, pero también tiende a necesitar espaciar las letras cuando las tiene sobre un fondo oscuro o, de lo contrario, las formas de las letras se desangran. Hay pequeñas cosas que puedes ajustar en la tipografía. La consulta de los medios se cae muerto simple. Quiero decir, son como dos líneas de código para agregar eso a su sitio. Entonces es lo que haces con eso. No es necesariamente solo invertir los colores. A veces es necesario ajustar el contraste, pero también ajustar el tipo para una mejor legibilidad.

Drew: Entonces, presumiblemente, no es solo el peso lo que se puede variar en una fuente variable. ¿Hay otras formas en que podemos cambiar nuestra fuente como se muestra?

Jasón: Sí. Depende completamente del diseñador tipográfico. Creo que es muy bueno reforzar que esto no es gratuito para todos en el navegador. El navegador solo puede representar lo que se ha habilitado en la fuente. En última instancia, es el diseñador tipográfico quien dice que el peso varía de esto a esto. Es posible que tenga un eje de ancho. Se volvería un poco más angosto o un poco más ancho, pero también existe la posibilidad de tener lo que se llama ejes registrados. Hay ancho, peso, inclinación, cursiva y tamaño óptico. Esos son todo tipo de cosas centrales que se asignan a las propiedades de CSS. Slant permite un ángulo entre uno y otro, por lo que es vertical y de hecho he visto algunos con una inclinación inversa y una inclinación hacia adelante. Eso es totalmente abierto. La cursiva generalmente está activada o desactivada, pero no necesariamente. De hecho, puedes tener... Bueno, hay diseñadores tipográficos que han experimentado cambiando las formas de las letras gradualmente a medida que cambias de normal a cursiva, y sustituyendo las letras en el camino. Eso es algo interesante.

Jason: Pero luego está la posibilidad de tener ejes personalizados. El diseñador tipográfico puede definir los ejes personalizados que desee modificar. Has visto algunos que agregan una especie de goteo esparcido por la gravedad y todo tipo de formas divertidas retorcidas, o serifas extendidas, cambiando la altura de los ascendentes y descendentes. En las formas de letras minúsculas, cambiando si son o no serifas o no. Hay todo tipo de cosas que puedes hacer. Realmente depende de la imaginación de un diseñador tipográfico. Creo que solo estamos arañando la superficie en cuanto a lo que podría suceder de manera realista con todas esas cosas. Todo es accesible a través de CSS.

Drew: Sí. Todas estas propiedades se pueden modificar simplemente a través del CSS normal que está entregando con el resto de su diseño. ¿Qué tipo de cosas podemos hacer en CSS para activar esos cambios? ¿Es como lo haríamos con un diseño receptivo donde tenemos consultas de medios para activar eso?

Jason: Hay muchas formas de hacerlo. Hay un pequeño cambio que tienes que hacer. Supongo que proporcionaremos un montón de enlaces a algunas cosas que ayudarán a las personas a jugar con estas cosas. Quiero decir, he escrito un montón. Con suerte, eso ayudará a la gente. Luego, en el lado del uso, el eje de peso de la fuente solo se asigna al peso de la fuente. En lugar de decir negrita regular, solo proporciona un número. Puede cambiar eso con consultas de medios. Puedes cambiarlo con JavaScript. Puedes hacer lo que quieras con eso. He estado usando una técnica llamada CSS Locks que aprendí de Tim Brown para usar básicamente matemáticas. Propiedades y cálculos personalizados de CSS para escalarlo, una vez que alcanza un punto de ruptura pequeño hasta un punto de ruptura grande, escala suavemente el tamaño de fuente y la altura de la línea.

Jason: Entonces también puedes usar un poco de JavaScript para hacer lo mismo con su peso si quieres. El eje de peso se asigna al peso de la fuente, la propiedad CSS. El eje de ancho en la fuente se asignará al estiramiento de la fuente, y eso solo se expresa como un porcentaje. Debo señalar que muchos diseñadores tipográficos no necesariamente están pensando en cómo se expresa esto, por lo que es posible que vea rangos de peso que hacen cosas extrañas como ir de 400 a 650. Todavía tiene que expresarlo como un porcentaje, pero funciona. Está bien. Solo necesita saber qué es lo normal y todas las fuentes están documentadas. Luego, con cualquier otra cosa que no sean esos dos, actualmente, hay un soporte un poco desigual en la implementación de la inclinación y la cursiva. Muchas de esas cosas que necesita recurrir a la configuración de variación de fuente y luego puede proporcionar varias cosas a la vez. Es algo así como la configuración de características de fuente. Es una especie de sintaxis de nivel inferior en la que puede proporcionar una lista separada por comas de este eje de cuatro letras y el valor, el siguiente, el siguiente.

Jason: Lo único que la gente debe tener en cuenta es que cuando usa la configuración de variación de fuente, pierde toda la comprensión semántica de eso y pierde el respaldo. El peso de la fuente y la extensión de la fuente se admiten universalmente en todos los navegadores. Definitivamente deberías usar esos atributos. Para cualquier otra cosa, puede usar la configuración de variación de fuente. Pero la ventaja de usar el peso de la fuente como lo harías normalmente es que si la fuente variable no se carga, el navegador aún puede hacer algo al respecto. Mientras que si no entiende las fuentes variables, o no se carga, si todo está en la configuración de variación de fuente, perderá toda la información de estilo. Esa es solo una pequeña nota al margen solo en términos de qué se admite dónde. Pero también debo decir que es compatible con todos los navegadores de envío que es probable que encuentre en la mayoría de las circunstancias. I-11 no funciona, pero puede entregar fuentes web estáticas y luego usar soportes publicitarios en su CSS para cambiar a las fuentes variables. Entonces evitará cualquier descarga duplicada de activos y funciona muy bien. Ya lo tengo en producción en varios sitios.

Drew: Creo que, como muchas de las tecnologías web más modernas que estás viendo, si hay una fuente variable que ha estado burbujeando en silencio durante un tiempo, y es solo cuando finalmente se desborda y obtenemos soporte en los navegadores. y gente como tú haciendo ruido al respecto y haciéndoles saber a todos que está ahí. Casi puede parecerle al diseñador o desarrollador estándar que solo realiza su trabajo día a día y no realiza un seguimiento de todas las descargas más recientes. Puede parecer que ha salido de la nada. Pero supongo que esto ha estado burbujeando durante bastante... Es decir, usted mencionó las dos implementaciones ligeramente diferentes con las que estamos lidiando ahora. ¿Hay una especie de estándar más antiguo y más nuevo para implementar?

Jason: Bueno, en realidad no es más viejo y más nuevo. Ambos son muy intencionales. Volveré a eso en un segundo porque realmente vale la pena entender cuál es la diferencia con esos. Pero usted está en lo correcto. El formato se introdujo hace poco más de tres años, en septiembre de 2016. De hecho, tuvimos la primera implementación funcional en la compilación nocturna de Safari tres semanas después. Fue bastante rápido que tuviéramos un navegador en funcionamiento. Safari fue el primero en enviar soporte completo para él. Creo que fue cuando salió High Sierra. No sé, era como Safari 12 o algo así.

Jason: Pero no mucho después, terminamos recibiendo soporte en Firefox, Edge y Chrome. De hecho, hemos tenido compatibilidad con navegadores durante casi dos años. Pero no había un montón de fuentes. Ha habido este tipo de evolución constante. El soporte para usarlos en la web en realidad ha existido por más tiempo que en cualquier otro lugar. Quiero decir, técnicamente, este formato también funciona en el sistema operativo de escritorio. Entonces, si tiene un formato TTF, puede instalarlo en su sistema operativo de escritorio en Windows o Mac, y puede usarlo en cualquier aplicación. No siempre puedes variar los ejes de la forma en que querrías jugar con ellos infinitamente, pero existe esta noción de instancias con nombre incrustadas en ese archivo de fuente que lo mapean de nuevo a lo que estamos acostumbrados.

Jason: En Keynote, por ejemplo, no hay soporte explícito para fuentes variables, pero el formato funciona si hay cosas como Tech Sense, de nuevo, condensado, ligero. Tendrá esos normales, regulares, regulares en negrita, angostos, etc., todos estarían disponibles en un menú desplegable al igual que instalar toda la familia. Luego, si está en Illustrator o Photoshop o ahora en InDesign que se lanzó la semana pasada o Sketch que se envió hace un par de semanas, ahora todos admiten fuentes variables, para que luego pueda acceder a todos los diferentes ejes y jugar con él a su contenido del corazón. Pero en el navegador, ahí es donde hemos tenido mucho más con lo que trabajar. Siguiendo el ejemplo de su esposa, he estado tocando este tambor durante un tiempo tratando de que la gente sea más consciente de ello. Luego, gracias al trabajo que ha realizado el equipo de Firefox en la creación de herramientas para desarrolladores. Con Jen Simmons impulsando eso, tenemos herramientas increíbles para trabajar en el navegador que nos ayudan a comprender de lo que son capaces las fuentes.

Drew: Mencionaste a los diseñadores tipográficos y las capacidades de las fuentes. Hay un montón de fuentes que están disponibles?

Jason: Bueno, mucha gente lo está haciendo ahora. Probablemente el mejor y más completo lugar para buscarlos sea el sitio de Nick Sherman, v-fonts.com, v-fonts.com. Eso es sólo un sitio de catálogo. Se está volviendo muy, muy grande rápidamente. Hay más fuentes variables saliendo todo el tiempo ahora. No hay una gran cantidad de fuentes abiertas, pero si busca fuentes variables en GitHub, encontrará un montón de proyectos allí. Pero Google ha lanzado una versión beta de su nueva API con alrededor de una docena de fuentes variables disponibles allí. Hay más viniendo de ellos. Acaban de lanzar Recursive en recursive.design, que es un nuevo y fantástico tipo de letra de Stephen Nixon. La variable Plex, una está disponible, es de código abierto. Luego hay toneladas de comerciales.

Jason: Lo bueno de esto es que Monotype ha lanzado algunos bastante grandes. Pero son muchas fundiciones más pequeñas y diseñadores individuales los que están liderando el camino en la experimentación con este formato. Creo que es genial para el diseño y genial para la web que estemos viendo todos estos nuevos diseños de nuevos diseñadores o diseñadores más pequeños que están abriendo nuevos caminos. Porque me gusta verlos triunfar con esto porque realmente han tomado la iniciativa de publicar algunas cosas geniales.

Drew: ¿Estamos viendo alguna actualización de las fuentes existentes para que sean fuentes variables para reemplazar las familias por una única fuente variable? ¿Eso está sucediendo en absoluto?

Jasón: Lo es. Los que lanzó Monotype son actualizaciones de algunos tipos de letra realmente clásicos. FF Meta fue uno que les ayudé a lanzar diseñando la demostración para ese último año. Ellos tienen eso. Univers, Frutiger, Avenir, creo que esos son los que han sacado hasta ahora, esos cuatro. Esos son realmente tipos de letra de marca clásicos centrales. Están trabajando en más. Sé que tienen al menos otra media docena más o menos que están en varias etapas de producción. Sé que Dalton Maag, que hace un montón de trabajos tipográficos personalizados para grandes corporaciones, tiene varias fuentes variables realmente agradables. He estado trabajando con TypeTogether. También tienen varios tipos de letra realmente geniales. yo se que uno...

Jason: He mostrado en algunas de las conferencias en las que he hablado sobre estas cosas que Adidas también tiene las suyas propias que han estado usando para todo su trabajo de marca en forma impresa durante casi dos años. Lo cual es algo realmente notable. Pero también Mark Simonson está trabajando en una versión variable de Proxima Nova. Eso es un gran problema. Esa ha sido una de las fuentes web más vendidas de todos los tiempos. Está sucediendo. Está sucediendo en partes y piezas de todo tipo de arriba y abajo de la escala. Pero incluso algo tan simple como suscribirse a David Jonathan Ross, Font of the Month Club, le proporcionará una fuente variable casi todos los meses. Quiero decir, ha sido realmente increíble en las cosas que ha estado publicando. Es como $ 72 por año o algo así. Ha estado sacando todo tipo de cosas realmente hermosas.

Drew: Es bastante interesante entonces, porque obviamente, con las capacidades de las fuentes variables, podrías crear nuevos diseños que las utilicen. Pero potencialmente, podría haber sitios que están en producción donde hay versiones de fuentes variables ahora disponibles donde alguien podría regresar, revisar eso y reemplazar múltiples archivos de fuentes con una nueva implementación basada en una nueva versión de fuente variable.

Jasón: Sí, absolutamente. Esas son algunas de las preguntas que recibo con bastante regularidad. Recientemente, estaba mirando un sitio web de transmisión de deportes bastante grande que el equipo de desarrollo me hizo sobre la misma pregunta. Busqué, y efectivamente, para dos de los tipos de letra que están usando, hay fuentes variables disponibles. Un poco de investigación nos mostró que podíamos reemplazar cuatro instancias de un tipo de letra y tres del otro con dos archivos de fuentes variables y quitar más del 70 % del tamaño del archivo en cinco solicitudes. Quiero decir, sería una pregunta ganar desde el punto de vista del rendimiento. Para un sitio realmente a gran escala, cuando observa la eliminación de casi 300 000 de descarga de datos en millones de usuarios, eso en realidad suma ahorros reales en dólares y costos de ancho de banda. Incluso desde ese punto de vista puramente práctico sin reescribir ninguno de sus CSS, simplemente reemplazando esas fuentes, ya será una ganancia significativa para ellos en rendimiento, en el tiempo de procesamiento de la página y luego en los costos reales de ancho de banda para ellos.

Drew: En términos prácticos, ¿es tan simple como parece, simplemente cambiar uno por el otro?

Jasón: Puede ser. Creo que el ejemplo perfecto de eso es algo que Google dejó escapar casualmente en ATypI en septiembre que han comenzado a hacer eso con Oswald por una suma de 150 millones de veces al día. Hicieron una versión de fuente variable y simplemente comenzaron a navegar en sitios web que usaban suficientes instancias en las que generaría un beneficio significativo. No le dijeron a nadie. No se lo dijeron a los dueños del sitio. Nadie tenía que hacer nada. Porque tenía el mapeo correcto del eje de peso, por lo que los valores predeterminados simplemente funcionarían. 150 millones de veces al día es una gran cantidad de fuentes. Eso está comenzando a darles una mejor comprensión de cómo sería este panorama para ellos si pudieran comenzar a cambiar las cinco fuentes web principales que sirven. Supongo que Open Sans es probablemente uno de esos. Sé que probablemente Lato esté ahí, Roboto.

Jason: Entonces, si los observa y observa cómo se verían las versiones optimizadas de esos, entonces puede ver que hay algunas razones muy claras por las que Google estaría interesado en eso. Luego, si observa el otro lado, solo el espacio de diseño y cuánto más fiel a la voz de una marca podría ser una empresa si trabaja con toda la gama de tipos de letra de su propia marca en lugar de tener que intercambiar diferentes o ser más limitada en su paleta. Entonces, hay cosas realmente interesantes para aprender y explorar en ambos extremos de ese espectro.

Drew: Suena como un nuevo y emocionante mundo de tipografía y oportunidades para escribir de una manera más sensible y potencialmente más creativa en la web de lo que habíamos podido hacer antes.

Jason: Bueno, eso es ciertamente lo que espero. Creo que una de las mayores barreras para la adopción de fuentes en la web en todas las etapas ha sido el rendimiento. ¿Así que lo que pasa? ¿Cuánto tiempo se tarda en cargar? ¿Qué significa eso para el tiempo de procesamiento en la página? Tenemos esos problemas de ese tipo de destello de texto invisible o texto sin estilo. Lidiando con todas esas cosas, realmente, se trata de cuánto tiempo lleva todo llegar allí. ¿Cómo reacciona el navegador a eso? Hay muchas cosas que podemos hacer para mitigar algunos de esos problemas. Pero realmente se reduce a que si tenemos una mejor fuente y una mejor manera de servirla, entonces todos esos problemas se vuelven mucho menos significativos. Entonces, teniendo eso en su lugar, podemos ser mucho más expresivos. Realmente podemos intentar impulsar el diseño final de esto y tratar de ser un poco más creativos.

Drew: Porque has escrito últimamente expresando la sensación de que tal vez la web haya caído en una especie de trampa de diseñar una plantilla de artículo por sitio, tal vez con algunas variaciones para algunos tipos diferentes de contenido. Pero todo el mundo está a la deriva hacia este estilo medium.com de una sola columna de texto muy legible para mis ojos. Bien escrito. ¿Es eso tan malo?

Jason: No creo que sea malo. Solo creo que se va a poner aburrido. Quiero decir, cuando salió Medium, eso fue bastante novedoso. Quiero decir, creo que una columna de... Como dices, estaba muy bien escrito. Tiene una bonita zona. no estaba lleno. No estaba abarrotado y las barras laterales y todas estas otras cosas. Siempre habrá preguntas sobre el modelo de negocio y qué lo respaldará. Es por eso que un rediseño realmente hermoso de, creo, fue el Seattle Times que Mike Monteiro para Mule Design hizo hace unos años. Absolutamente hermoso hasta que se lanzó. Luego pusieron estos carteles masivos a ambos lados de la columna y simplemente quitaron todo ese espacio en blanco. Fue una verdadera pena.

Jason: Entiendo que las empresas tienen que ganar dinero. Hay ramificaciones en eso. Así que sería maravilloso que esa fuera una opción. Para tener ese diseño limpio y agradable. Pero no debería ser el único. Tenemos todas estas capacidades en CSS que nos permiten hacer cosas realmente interesantes con márgenes y diseño. Quiero decir, ni siquiera es solo el hecho de que ahora tenemos red. Pero el hecho de que podamos hacer cálculos en el navegador en CSS nos permite hacer cosas mucho más interesantes. Agregas eso, la capacidad de ser mucho más expresivo con el tipo, entonces podríamos comenzar a ver lo que hacen en las revistas. Vanity Fair no tiene una plantilla de artículo. Tienen seis o siete u ocho. Si realmente observa cómo presentan esas cosas, hay una gran cantidad de variabilidad, pero está jugando dentro de un sistema.

Jason: Entonces, cuando creamos un sistema de diseño para nuestro sitio web, en lugar de detenernos en un solo diseño, tenemos una manera relativamente fácil de incorporar algunos cambios en nuestros sistemas de administración de contenido. La mayoría de ellos admiten una buena cantidad de flexibilidad. No hay ninguna razón por la que no podamos darle a la gente una opción. Quiero usar el diseño uno, dos, tres, cuatro, cinco, seis. Eso va a introducir diferentes márgenes, diferentes compensaciones. Tal vez introduciendo la capacidad de crear algunas columnas. Hay muchas cosas diferentes que podríamos hacer que harían una web mucho más interesante. Creo que ese tipo puede jugar un papel muy importante en eso.

Drew: ¿Es el tipo nuestro salvador cuando se trata de agregar un poco más de personalidad a la web?

Jason: Bueno, creo que puede ser. Creo que hemos tenido esta larga evolución en la web hacia una mejor usabilidad. Pero creo que una de las bajas que hay cuando todo lo que nos preocupa es ese enfoque utilitario, ¿es utilizable? Eso tiende a vencer a la personalidad. Luego, cuando todos los sitios web son… Una vez más, aparecieron las fuentes web y eso creó un nuevo nivel de expresividad que no teníamos antes. Entonces, de repente, pudimos... Las pantallas mejoraron. Así que las serifas volvieron a la mezcla. Podríamos usarlos de nuevo en la web. Estas cosas agregaron algo de vida. Luego hemos vuelto a optimizar para que todos usen una o dos San-serifs. Es Open Sans o es Roboto u Oswald o lo que sea. Volvemos a lo mismo donde hay toneladas de tipos de letra realmente buenos y legibles. Realmente no le hemos enseñado a esta generación actual de diseñadores de UX que a menudo son los que manejan mucho de esto sobre tipografía. Cualquier cosa sobre cuán expresivo puede ser, cuánto puede alterar el estado de ánimo y el tono.

Jason: Así que tenemos un gran número de personas que están dictando la dirección del diseño de las cosas en la web que tienen ideas sobre tipos que quizás no estén tan bien informadas como alguien que estudió diseño gráfico y esas nociones de legibilidad. Tenemos que unir esas cosas. No es uno o el otro. Es un y. Necesita ser.

Drew: Especialmente cuando hablamos de personalidad y de tono y estado de ánimo. Desde un punto de vista comercial o de lo que estamos hablando son aspectos de una marca. Entonces, al hacer que todo se vea igual, ¿estamos perdiendo la capacidad de comunicar una marca a los clientes?

Jasón: Absolutamente. No quiero profundizar en la política, pero creo que todo... Uno de los principales problemas que sin duda experimentamos en los EE. UU., y estoy seguro de que no es tan diferente de lo que sucedió en el Reino Unido en los últimos años. Cuando todas las noticias se consumen a través de una única plataforma y todo se ve igual, no hay distinción de voz. Así que es algo así como el 75% de los adultos en los EE. UU. dicen que obtienen una parte importante de sus noticias de Facebook. Quiero decir, dejemos de lado cuán horrible es eso en general. Pero dado que todo se presenta de manera uniforme, no hay diferencia entre un artículo de The Guardian, New York Times, The Wall Street Journal, The Washington Post y las noticias de derecha de Joe. Todo se presenta exactamente igual.

Jason: Cuando vemos ese logotipo, ese tipo de estilo, The Guardian es tan característico. El Wall Street Journal es tan característico. Lo reconocemos instantáneamente cuando lo vemos, aunque sea solo un titular. Sabemos de dónde vino eso. Luego está esta asociación automática con esa marca y esa autenticidad. Cuando quitas todo eso, te quedas con, “Está bien, voy a evaluar esto en un titular. Entonces está encendido, ¿quién escribió un mejor titular? Eso no es mucho para continuar. Así que creo que hemos perdido una cantidad tremenda. Si observa lo que Apple News Plus está tratando de hacer, hay algunos esfuerzos por parte de algunas compañías para intentar reintroducir eso. Blundell hizo un trabajo realmente interesante en Europa. Se lanzaron en los EE. UU., pero no estoy muy seguro de que alguna vez tengan tanto éxito. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. Es cierto. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Gracias. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.