La evolución de la tipografía con fuentes variables: una introducción

Delgado, grueso y todo lo demás: FF Meta Variable de Monotype

Las palabras tienen poder, y la tipografía es su voz.

Durante siglos, el tipo ha sido cómo "escuchamos" lo que leemos. También se entiende generalmente que los tipos de letra y la tipografía son un elemento central de la marca, de la expresión, del rango vocal. La gran tipografía influye en la comprensión, el estado de ánimo y el significado de innumerables maneras y es una parte esencial del diseño. Desafortunadamente, durante muchos años después del advenimiento de la web, no pudimos aplicar todo menos el diseño tipográfico más básico al contenido en línea. Con la capacidad de usar fuentes reales y características OpenType, como ligaduras, conjuntos de figuras específicas, fracciones y kerning verdadero, el panorama tipográfico mejoró enormemente. Pero la realidad de ver contenido en la web dicta que la velocidad es el aspecto más crítico del diseño, por lo que hemos cambiado el "rango vocal" tipográfico por la velocidad de la página. Eso significa menos peso de fuente y menor fidelidad de marca y voz.

De muchos, uno (paradigma: desplazado)

Una fuente variable es una fuente única que actúa como muchas
- John Hudson

El advenimiento de las fuentes variables cambia toda esa dinámica. Según lo descrito por John Hudson, una fuente variable es una fuente única que actúa como muchas: todas las variaciones de ancho y peso, inclinación e incluso cursiva pueden estar contenidas en un único archivo de fuente altamente eficiente y comprimible. Además: el formato (que técnicamente forma parte de la especificación OpenType 1.8) es completamente extensible. El diseñador de tipos tiene control completo sobre qué ejes se utilizan, sus rangos e incluso la definición de nuevos ejes. Actualmente hay 5 ejes "registrados" (ancho, peso, inclinación, cursiva y tamaño óptico), pero el diseñador puede variar cualquier eje que elija. Algunos ejemplos incluyen la altura de los ascendentes y descendentes, el grado del texto, incluso la forma serif. Las posibilidades son casi ilimitadas. Al eliminar la barrera del rendimiento, abrimos la puerta para un diseño más interesante y dinámico y una capacidad mucho mayor para expresar la verdadera voz de la marca. Todo esto mientras se mantiene la fidelidad al tipo de letra en sí: solo se pueden variar los ejes expuestos por el diseñador de tipos. No se permite distorsión artificial.

Diseño web, reinventado

Si bien la tecnología aún está madurando y los diseñadores tipográficos están trabajando para ser más fluidos en esta nueva forma de trabajar, la promesa de diseño en la web es innovadora. El escenario típico sería restringir cualquier diseño dado a 3–5 fuentes diferentes para representar cada aspecto del lenguaje y la voz de diseño de un sitio, incluida cada permutación para la copia del cuerpo y los encabezados. En su implementación más simple, las fuentes variables nos darían la libertad de usar diferentes pesos para cada nivel de encabezado, lo que aumentaría en gran medida su claridad y legibilidad.

Símbolos de 100 a 900 pesos.

También se podrían usar anchos de caracteres ligeramente más estrechos para encabezados o en pantallas de información con gran densidad de datos. De hecho, todo el sistema tipográfico podría diseñarse para ser proporcional: el peso y el ancho podrían convertirse en multiplicadores en la configuración estándar de copia del cuerpo. Hacerlo permitiría que esos aspectos se escalen fácilmente junto con la copia del cuerpo si su configuración cambia en función del tamaño de la pantalla o la preferencia del usuario. Todo esto acompañado de un aumento en el rendimiento debido a menos solicitudes HTTP (menos archivos de fuentes) y un ahorro general de datos para descargar (aunque eso variará según la fuente y la compresión utilizada).

Pero si bien estas libertades nos permiten ser más expresivos, algunas de las capacidades realmente interesantes ayudarán a transformar la experiencia de lectura en sí. Esta página (bueno, la página de demostración en sí) se ha configurado con una nueva versión de fuente variable de FF Meta, el diseño clásico sans-serif de Erik Spiekermann lanzado por primera vez en 1991. Incluso con un solo eje de variación (peso) de ambos En las variantes romana y cursiva, se puede lograr un rango maravilloso de voz con ganancias masivas en el rendimiento: 18 archivos y más de 288k reemplazados por un solo archivo de solo 84k.

Lectura reinventada en pantalla

[Meta] tiene que hacer más que verse bonita: tiene que trabajar bastante duro
—Erik Spiekermann

Algunos de los mayores desafíos para crear una buena experiencia de lectura están vinculados a la falta de delicadeza en proporción y detalles finos. La combinación de las características y variaciones modernas de CSS y OpenType presenta una combinación poderosa. Ser capaz de establecer características como las ligaduras y la separación silábica en función del idioma, activar y desactivar la separación silábica en función del tamaño de la pantalla e incluso adaptar el ancho de los caracteres en las pantallas más pequeñas para que quepan más caracteres por línea sin reducir el tamaño de la fuente puede hacer mejoras dramáticas en La suavidad y comodidad de la experiencia de lectura.

Listo para un primer plano

Corte del siglo XVIII de Garamond cortado en tamaños ópticos. La primera imagen tiene un tamaño de 6 puntos, la segunda es de 72. Observe la diferencia en el contraste del trazo. Es mucho más refinado en el tamaño más grande.

Otra característica que era común en el tipo de metal pero que se perdió en la traducción a la composición tipográfica y digital fue el tamaño óptico (bueno, algunos diseñadores aún crean tamaños ópticos separados para diferentes rangos, pero es raro y algo limitado). No se encuentra tan a menudo en los diseños sans-serif, pero en décadas pasadas (en verdad, durante siglos), era bastante común que los tamaños físicamente más pequeños de una tipografía se cortaran con trazos ligeramente más pesados, cuencos y mostradores más abiertos, y en en algunos casos, aperturas aún más amplias para preservar la legibilidad. Los periódicos en particular encontraron esto crítico para garantizar que las líneas no se perdieran o que las letras no sufrieran demasiado por la ganancia de tinta.

El tamaño óptico ha regresado en las fuentes variables, y puede ser aplicado automáticamente donde esté disponible, o establecido explícitamente por el diseñador web o desarrollador. Como se mencionó, no es una característica tan frecuente en tipos de letra sans-serif como esta, pero se puede usar con un efecto bastante dramático en diseños de serif de contraste de trazo más alto.

Polaco y aplomo

Con los beneficios ya discutidos, el caso de las fuentes variables es bastante convincente. Pero una buena tipografía no es todo lo que hay para un gran diseño. La gama de ejes, como el ancho y el peso, nos brinda una tremenda libertad para adoptar más diseño editorial en la web sin tener que cargar una cantidad exorbitante de archivos. Y dado que ya tenemos esas pocas fuentes variables requeridas, la oportunidad es exponerlas para que las usen los propios editores de contenido. Imagine un papel para los diseñadores dentro del Sistema de gestión de contenido (o CMS) donde se aloja el sitio web. Ese diseñador podría usar algunos controles simples integrados en el CMS que les permitirían componer títulos o comillas tipográficas específicos, permitiendo un nuevo nivel de diseño muy similar al que tenemos impreso, sin tener que escribir código personalizado cada vez.

Puede que aún estemos al comienzo de esta nueva era, pero su futuro es ciertamente brillante.

A partir de mayo de 2018, 3 de los 4 principales navegadores web ya admiten fuentes variables, además de las dos plataformas móviles dominantes (consulte el soporte en caniuse.com). Con eso en mente, estamos listos para comenzar a iluminar la web hoy.

Aquí está la página completa en CodePen. Eche un vistazo a todo junto y eche un vistazo al CSS que lo impulsa. Esto incluye un sistema tipográfico de escala que creé basado en algunas ideas que aprendí de Jen Simmons y Tim Brown, utilizando unidades de ventana gráfica, propiedades personalizadas CSS (también conocidas como variables) y muchos cálculos. Puede verlo directamente en CodePen o realmente verlo incrustado a continuación.

Algunas reflexiones sobre el tipo de letra y el proyecto.

Siempre he sido fanático del trabajo de Erik Spiekermann, y creo que la cronología y la historia de Meta, Officina y Fira son realmente interesantes, y en gran parte del tejido del diseño digital para mí en los últimos 25 años. La oportunidad de tomar una tipografía con ese tipo de historia e impacto en el mundo del diseño y trabajar con ella en el contexto de una nueva tecnología fue realmente emocionante. Aprecié especialmente poder trabajar con peso y cursiva como parte del mismo archivo: muestra muy bien el valor del formato de fuente variable.

Decidí ni siquiera comenzar a diseñar la página hasta que escribí el artículo en sí. Quería escribir una buena introducción dirigida a diseñadores y propietarios de marcas para presentarles los beneficios de las fuentes variables en términos que resuenen con sus preocupaciones: lenguaje de diseño y expresión de marca. Una vez que sentí que tenía un buen borrador, agregué un poco más específico al tipo de letra y su lugar en nuestro léxico de diseño. Esto me dio algunas ideas sobre cómo mostrar tanto la tipografía como la historia.

Al pensar en la composición básica, elegí la escala: quería jugar con los extremos de peso y tamaño de una manera que no se ve con tanta frecuencia en la web debido a que la mayoría de los diseños están más restringidos en los pesos utilizados. En este caso, he usado una gama completa de pesos de 100 a 900, tanto en romano como en cursiva. Una vez que comencé a obtener un diseño que me gustó, se me ocurrió que en lugar de hacer gráficos para ilustrar las capacidades, sería más interesante hacer ilustraciones fuera de tipo: comillas tipográficas y un poco de datos de fuente de estilo "infografía".

El último toque de la parte superior del ampersand en realidad se inspiró en la página de muestra tipo en el sitio FontFont: hay una muestra de glifos que muestra todos los pesos de un ampersand superpuestos. Originalmente los había apilado todos de la misma manera, con la animación en un bucle, pero eso fue demasiado para algunos navegadores que aún implementaban fuentes variables y animación de fotogramas clave. Cuando llegué al diseño superpuesto con una opción de reproducción / pausa, me gustó la forma en que se veían dispersas (especialmente en dispositivos móviles). Así que le di la vuelta y comencé a hacerlo estático, y luego reproduje la animación una vez y volví al diseño extendido / en capas.

En general, estoy muy contento con el contenido y el diseño, y también me gusta cómo se mueve y evoluciona en diferentes tamaños de pantalla. Espero que sirva de inspiración e instrucción para otros también.

[Monotype me contrató recientemente para escribir y diseñar una página de demostración con una nueva versión de fuente variable del clásico diseño de Erik Spiekermann FF Meta. Este es el texto de esa página y algunas de las imágenes. La página completa en vivo está alojada en CodePen e incrustada arriba. Está abierto a todos, así que siéntete libre de hacer una copia y jugar con ella tú mismo. Puedes ver su introducción a la tecnología también.]

Contenido original publicado en mi blog