La anatomía de mil tipos de letra

Un intento de construir una base de datos de fuentes con opentype.js

Incluso años después del lanzamiento de Avatar, hay una cosa que Ryan Gosling no puede superar: la elección de la fuente del logotipo de la película "Papyrus". En la parodia producida por Saturday Night Live, el diseñador del logotipo abre el menú de fuentes, navega por las fuentes una por una y al azar decide ir con "Papyrus".

La elección aparentemente tonta de una fuente es un problema general con los menús de fuentes: hay muy pocas o demasiadas opciones.

Por un lado, una limitación a las fuentes del sistema, como se ve en el video, puede llevar a una mala elección porque simplemente no hay algo mejor instalado.

Por otro lado, las bibliotecas de fuentes web con cientos o miles de fuentes pueden ser bastante abrumadoras y llevar a una paradoja de elección.

Cena para ninguno: el sabor amargo del menú de fuentes

El menú de fuentes promedio presenta una lista de fuentes disponibles, ordenadas por nombre, pero de otra manera no relacionadas: un tipo de letra diseñado para titulares en negrita es seguido por uno diseñado para pequeñas interfaces de usuario y luego aparece un tipo de letra de script elegante hecho para invitaciones de boda. Ahora queda atrapado en un proceso que lleva mucho tiempo desplazándose por toda la lista de principio a fin o simplemente decide elegir la primera mejor coincidencia de la parte superior de la lista y llamarla un día.

Obviamente, esta no es una interfaz hecha para la exploración sistemática, sino infinitas sorpresas. Si bien me gusta sorprenderme, también me gusta influir en mis probabilidades.

El menú de fuentes en

Un enfoque sistemático para encontrar tipos de letra

Hay varias formas de limitar las opciones. Antes de sumergirme en analizar archivos de fuentes, glifos y tablas de metadatos, primero veamos la clasificación, las listas seleccionadas y luego la anatomía.

1. Clasificación

Al principio de la escuela de diseño, aprendí sobre la historia de la escritura y practiqué la caligrafía para comprender cómo evolucionó la escritura y cómo las herramientas tuvieron un impacto inmediato en el diseño de las letras.

Esto condujo a sistemas sofisticados para clasificar las fuentes en función de su apariencia a lo largo de la historia. Las clasificaciones más simples son serif, sans-serif, monoespaciado, script y tipos de letra de pantalla. Por lo general, podemos encontrar esas clases en forma de filtros en cualquier sitio web de fuentes:

Interfaces de filtro de clasificación. Arriba a la izquierda: Fontshop. Derecha: MyFonts. Abajo a la izquierda: Google Fonts. Abajo: TypeKit.

Esos filtros simples aún podrían darnos demasiadas opciones. Es entonces cuando se pueden introducir términos más específicos como serif de transición, serif humanista o blackletter para diferenciar los tipos de letra del serif de clase.

Algunas veces esas subcategorías están disponibles como etiquetas. Pero a veces simplemente no existen con tanto detalle. Tal vez hay demasiadas categorías? ¿Quizás los usuarios no entienden todas esas opciones? ¿Quizás no hay datos completos y consistentes disponibles?

2. Listas curadas

Otra forma de poner orden en el caos es confiar en el conocimiento de los demás: listas de fuentes seleccionadas por humanos. Podemos encontrarlos, por ejemplo, en Fontshop. Allí puede encontrar colecciones basadas alrededor de una década en la historia, como "1930", basadas en similitudes como "Helvetica Alternatives" o listas específicas de aplicaciones como "Branding" o "Newspapers".

Se pueden encontrar listas similares en Typekit, TypeWolf o FontsInUse. Creo que esas listas son geniales y animo a todos a comenzar a hacer sus propias listas con fuentes con las que ya han trabajado o visto en la aplicación. Pagará en el futuro tener esas referencias.

3. Anatomía

La forma más compleja de ver los tipos de letra es centrarse en los detalles de su diseño y tratar de comprender qué hace que un tipo de letra sea bueno o especial. Afortunadamente, hay libros sobre diseño tipográfico, tipografías y tipografía. Pueden enseñarnos cómo hacer tipos de letra, cómo elegirlos y cómo usarlos.

Uno de esos libros es "La anatomía del tipo" de Stephen Coles. Unos años después de la escuela de diseño, este libro fue un repaso que revela detalles sobre 100 tipos de letra bien establecidos. Stephen Coles usa términos como x-height, ancho, peso, terminales de bola, estilo serif y otros para describir la calidad de los tipos de letra.

Después de mirar esos 100 tipos de letra, pensé: ¿qué pasa con el resto? ¿Qué pasa con las fuentes en mi computadora? ¿Y los de la web? ¿Cuáles son su altura, ancho, peso y contraste? ¿Cómo puedo averiguarlo?

Dentro de un archivo de fuente: falta de metadatos

Antes de comenzar a codificar, esperaba poder conocer las propiedades de una fuente de una manera fácil. En teoría, cada archivo de fuente viene con una variedad de tablas de metadatos que contienen información sobre el nombre, el autor, el idioma y las características visuales del tipo de letra. El ancho, el peso y la clase de familia de fuentes son los obvios. Pero también se puede encontrar información sobre la altura x, la altura de la tapa, el ancho medio de los caracteres, los ascendentes y los descendientes. Otro conjunto de metadatos llamado Panose describe aún más propiedades, como el estilo serif, la proporción, el contraste y muchos más. Usando aplicaciones de diseño de fuentes como Glifos, cualquiera puede inspeccionar las fuentes para ver esta información:

Una captura de pantalla del

Pero la disponibilidad de esta información depende del trabajo que se haya realizado para hacer la fuente. Si bien algunas fuentes brindan mucha información, este no es siempre el caso, especialmente no para fuentes gratuitas o de código abierto como las de Google Fonts. Pero incluso si se proporciona información, no es necesariamente consistente o completa para hacer comparaciones basadas en ella.

Comparación de la información de Panose disponible para Roboto y Fira Sans, ambos disponibles en Google Fonts. Mientras que Fira Sans proporciona mucho, Roboto no. Obviamente, estos metadatos no se pueden usar para comparar fuentes ...

Bricolaje: análisis de fuentes con opentype.js

Entonces, para clasificar y comparar los tipos de letra, tuve que mirar de cerca los archivos de fuentes y encontrar formas automáticas de extraer información. Las fuentes están disponibles en una variedad de formatos de archivo, pero eventualmente casi siempre están disponibles como TTF (Fuentes TrueType).

Otros formatos son OTF (OpenType) que incluye información para características adicionales como ligaduras o WOFF (Web Open Font Format) que puede comprimir la fuente y almacenar metadatos adicionales.

En estos días, gracias al opentype.js de Frederik De Bleser, podemos inspeccionar archivos de fuentes usando JavaScript en un navegador web. Opentype.js nos da acceso a información vectorial de todos los glifos incluidos en un archivo de fuente y también proporciona acceso a métricas clave y tablas de metadatos.

Una base de datos de características.

En la siguiente sección, describiré cómo midí el contraste, la altura x, el ancho y el peso de todas las fuentes proporcionadas en la Biblioteca de fuentes de Google. Los mismos métodos podrían aplicarse a otras bibliotecas de fuentes, como Typekit o fuentes de su computadora.

Contraste de trazo

El contraste describe la proporción de trazos delgados a gruesos. Hay tipos de letra con poco contraste de trazo, p. serif de losa o muchos tipos de letra sans serif diseñados para interfaces de usuario, p. Roboto o San Francisco. Hay otros con mucho contraste, como Bodoni o Didot. Para medir el contraste, podemos trazar los contornos de una "o" y buscar las distancias más pequeñas y más grandes entre la forma interna y externa.

El contraste de un tipo de letra puede medirse en la parte más gruesa y delgada de una

Es una forma de letra simple y comparable que casi siempre consta de dos caminos. Es un buen candidato para estimar el contraste de un tipo de letra. (Nota al margen: si bien parece simple, la forma de una "o" en realidad es bastante difícil de dibujar bien, porque el trazo debe crecer suavemente y reducirse entre delgado y grueso).

opentype.js proporciona formas convenientes de obtener datos de ruta para dibujar caracteres en un elemento SVG. De hecho, dibujo caminos internos y externos por separado. Luego usé un algoritmo que viaja a lo largo de cada ruta y mide la distancia en cada punto. Luego podemos calcular la relación entre la distancia más larga y la más corta y listo, tenemos una medida de contraste comparable.

altura x

La altura x es una característica importante que puede ser un indicador de legibilidad y tamaño percibido de una fuente. Por lo general, se mide en la parte superior de una x minúscula.

La altura x se puede medir a partir de la información de glifos que proporciona opentype.js.

opentype.js nos proporciona las medidas necesarias, a saber, yMax para cualquier glifo.

Además de la medición absoluta, podría ser útil comparar también la altura x con la altura de los ascendentes. Por lo tanto, podemos obtener valores porcentuales como "la altura x es el 60% de las letras mayúsculas".

Para hacer que los valores sean comparables (algunas fuentes usan 1000 unidades de PerEm, otras 2048 unidades de PerEm), es necesario normalizar los valores y asignarlos a un rango de 0-1.

Ancho / Proporción

Con este valor trato de comprender cuán estrecha o ancha es una fuente. ¿Es más bien condensado o extendido? Una idea que tuve fue medir el ancho de una "M". Pero para hacerlos comparables, uno tendría que ponerlos en contexto del tamaño total o la altura x. Algunos tipos de letra también pueden tener glifos "M" muy especiales que no representan el resto del tipo de letra.

Otra idea es calcular el ancho de glifo promedio usando una palabra de muestra como "Hamburgefontsiv". Si bien esto funciona bastante bien, también necesitaría cierta normalización con respecto al diseño general y la altura de la tipografía.

Otro enfoque es observar la proporción de una "o". Esto proporciona valores sorprendentemente buenos para comparar los anchos de las fuentes.

Peso

Para medir el peso, represento el carácter minúsculo "o" en un elemento de lienzo HTML, lo relleno de negro y pinto el fondo de blanco. Luego mido la relación entre píxeles en blanco y negro. Una fuente de secuencia de comandos o rayita mostrará valores muy pequeños, mientras que una fuente en bloque muy pesada mostrará valores altos. Esto me dio buenos resultados, pero quiero mejorar esto midiendo tallos reales de glifos en el futuro.

Espaciado

Cuando todos los glifos de un tipo de letra tienen el mismo ancho, se denominan monoespacios. Lo importante aquí es que no necesariamente podemos mirar los glifos para determinar el ancho. Incluso en una fuente monoespaciada, un carácter de punto ocupa menos espacio visible que una "m". Por lo tanto, debemos tener en cuenta la propiedad advanceWidth que describe el ancho invisible alrededor de un glifo. Aquí podemos descubrir que Google Fonts usa monoespaciado como una clasificación de estilo, pero no para indicar la propiedad técnica. Las fuentes como Lekton o Libre Barcode no se enumeran como monoespaciadas, pero técnicamente lo son.

Semejanza

Una vez que tenemos una tabla de valores, podemos normalizarlos y luego calcular distancias para ver qué tan similares son las fuentes. Implementé una versión muy básica que no es terrible, pero podría ser mejor con una mayor precisión de los datos. Además, podríamos percibir una similitud diferente a la de un algoritmo que trata todas las características por igual. En ese caso, podríamos necesitar sopesar algunas propiedades más que otras.

El analizador de fuentes analiza cada fuente, dibuja SVG ocultos y elementos de lienzo para mediciones y guarda los datos en un archivo JSON.

Manifestación

He creado una interfaz para hacer accesible la base de datos. Las fuentes se pueden ver en una cuadrícula de diferentes tamaños para obtener una visión general de todas las fuentes o para ver los detalles de algunas fuentes.

Las fuentes se pueden ordenar por peso, altura x, contraste, ancho, nombre y número de estilos. Dependiendo de los criterios de clasificación, se muestran los glifos adecuados.

Los gráficos de área muestran la distribución de valores y se pueden usar para filtrar ciertos valores. Cada fuente tiene una vista detallada con algunas muestras, glifos, métricas, información de Panose y fuentes similares.

Captura de pantalla del sitio web del proyecto.

Explore el conjunto de datos
https://getflourish.github.io/anatomy-of-typefaces/
Por alguna razón, algunas fuentes no se cargan en Safari, por lo que recomiendo usar Chrome.

Screencast
https://vimeo.com/239318934

Recomendaciones

El conjunto de datos invita a explorar y encontrar similitudes e irregularidades. Establecer bajo contraste y serif devolverá todas las fuentes serif de losa. La altura x baja nos dará principalmente fuentes manuscritas o de script. Los valores muy altos a menudo indican todos los tipos de letra mayúsculas.

Inadaptados
Seleccionar los extremos inferior o superior del espectro a menudo arrojará diseños muy extraños. En su mayoría caen en la categoría de visualización.

Diferencias feas
La vista general de la cuadrícula revela las terribles diferencias de las líneas de base y las alineaciones. Algunas fuentes están radicalmente fuera de la red. E incluso con diferencias sutiles, queda claro que una simple sustitución de fuente 1 a 1 es casi imposible, con la excepción de algunas fuentes populares que parecen compartir un esqueleto similar.

El promedio es bueno
Es interesante ver que las fuentes de uso común que consideramos buenas, caen en un subconjunto similar. Al ajustar los filtros, puedo reducir la lista a menos de la mitad y todas las fuentes populares seguirán allí. Seleccionar los rangos promedio es una forma simple de filtrar los inadaptados y los extremos.

Fuentes bifurcadas
También podemos encontrar fuentes que se vean exactamente igual que otras pero con nombres diferentes. Algunos de esos son tenedores que amplían el conjunto de caracteres para admitir idiomas adicionales, p. Alegreya y Sahitya.

Numero de estilos
Sobre todo, la cantidad de estilos que tiene una fuente es un buen indicador de su calidad, al menos mientras los diseñadores aún necesiten hacer un gran esfuerzo para diseñar varios pesos y estilos. Las fuentes variables están en el horizonte y la personalización infinita puede ser el futuro. Pero hasta entonces, es un buen consejo trabajar con familias de fuentes que tienen múltiples estilos. Por lo tanto, ordenar la colección por número de estilos es una forma rápida de obtener una visión general de las mejores fuentes disponibles.

Resumen

Esta es una forma compleja de ver la exploración de fuentes. En última instancia, la calidad de los resultados depende de la calidad de las fuentes y de los datos que las rodean. Solo navegar por Google Fonts es muy limitante ya que no se sabe que su calidad general sea la mejor de su clase. Ya comencé a ejecutar análisis en la biblioteca Typekit y, en última instancia, enfrenté nuevos desafíos de rendimiento de la interfaz de usuario al obtener una vista previa de tantas fuentes. Tal empresa requiere estrategias adecuadas de almacenamiento en caché y precarga. Pero todavía no tengo que ir tan lejos.

Sin IA involucrada, ahora entiendo bien lo que hay dentro de los archivos de fuentes y lo que falta. Cuanto más me metí en esto, me di cuenta de cuán enorme es el campo de la tecnología de fuentes y que solo me estoy metiendo en algo que ya se ha hecho durante décadas.

Posibilidades

Con tal conjunto de datos, uno podría hacer más cosas:

  • encontrar fuentes alternativas con un ancho o estilo similar
  • ajusta automáticamente los tamaños de fuente y las alturas de línea según la altura x
  • encontrar combinaciones de fuentes basadas en similitudes o diferencias
  • crear un menú de fuente personalizado para el diseñador de carteles de Avatar
  • ...

Prueba la aplicación
https://getflourish.github.io/anatomy-of-typefaces/

Ver screencast
https://vimeo.com/239318934

Antes de publicar el conjunto de datos en bruto, quiero mejorar el análisis e intentar agregar más características. Si tiene alguna idea para mejorar, no dude en dejar un comentario. ¡Gracias por leer!

Otras lecturas

Guía de métricas de clasificación de Panose
La guía de 1991 describe en detalle cómo medir glifos individuales para obtener métricas comparables. Desafortunadamente, esas medidas deben tomarse a mano y pueden llevar mucho tiempo.

Llevando a los robots a la escuela de diseño, parte 1 por Jon Gold
Ya en mayo de 2016, Jon Gold escribió sobre su enfoque para analizar las fuentes en profundidad, cubriendo temas como el diseño basado en reglas, la inteligencia artificial y la relevancia de dichos conjuntos de datos para las herramientas de diseño.

Herramientas de fuentes de Google
Un conjunto de herramientas de fuente abierta que se utilizan para analizar fuentes para usar en el sitio web de Google Fonts. Puede encontrar algoritmos similares allí, pero también otros que, por ejemplo, determinan el ángulo en cursiva de una fuente.

Font Bakery
Font Bakery es un conjunto de herramientas de Python que ejecuta comprobaciones en archivos TrueType y archivos de metadatos relacionados con Google Fonts.

Apéndice

P: ¿Por qué no usaste datos de servicios de fuentes web?
R: Los servicios que proporcionan fuentes como Typekit, Google Fonts, Fontstand, Fontshop, MyFonts, etc., proporcionan su propio conjunto de filtros con un control más o menos preciso. Las API de esos servicios también difieren en la cantidad de información disponible para cada fuente. Por lo general, se proporciona la categoría, pero se omite otra información o no es compatible entre los servicios.

El siguiente ejemplo muestra que todo lo que obtenemos de la API web de Google Fonts para Roboto es su categoría sans-serif, variantes y subconjuntos. https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1

La API de Typekit proporciona más información sobre ancho, altura x, peso, clasificación, contraste, mayúsculas y una recomendación.
https://gist.github.com/getflourish/8c7c9ab4ddcf422cbb77866b5cf61575

Como puede ver, en el resultado API de ejemplo, la información sobre una fuente es específica del proveedor. Para ser más flexible e independiente comencé a hacer mi propio análisis.