Introducción
En la primavera de 2018, basándonos en la experiencia adquirida con fuentes como TT Commons y TT Norms, en TypeType formulamos la idea de una fuente universal y funcional para su uso en interfaces modernas en la mayoría de las plataformas móviles y web más conocidas.
Esta fuente debía contar con las mejores proporciones dentro de su categoría, además de una amplia variedad de estilos, caracteres y funciones OpenType. Su integración en el diseño debía ser fluida, permitiendo sustituir sin problemas fuentes de interfaz anteriores. Definimos el número de estilos en la familia como «óptimamente máximo».
Para los programadores, decidimos desarrollar una versión monoespaciada con cuatro estilos, conocida como la «cuadrícula dorada», basada en el diseño de la familia original. Contar con una pareja tipográfica armónica siempre es una ventaja.
Esta fuente debía convertirse en una herramienta versátil y práctica para diseñadores que trabajan con tipografías de interfaz en sus proyectos. Además, no podíamos dejar de lado el aspecto creativo: debía ser una fuente bella, elegante, pero a la vez discreta y neutral.
Desde el punto de vista técnico, debía ser perfecta, con un hinting moderno y una versión variable para quienes buscan lo último en tipografía. Así comenzó la historia de este proyecto, que se extendió durante más de un año.
Fase 1 — Investigación
Abordamos el proceso con rigor. Analizamos todas las familias tipográficas más populares utilizadas en interfaces, las clasificamos, las agrupamos y realizamos un estudio detallado de cada una.
El resultado de estos datos consolidados fue una gran presentación en la que intentamos analizar e identificar las principales características en la construcción de los signos, tales como:
- El grado de apertura o cierre de la apertura en los signos «a», «c», «e»;
- El grado de redondez o cuadratura de los círculos en los signos redondos;
- Las formas de los puntos, comas y otros elementos similares;
- Las formas condicionalmente abiertas y condicionalmente cerradas de algunos números, como 4, 6 y 9.
En la reunión general discutimos y definimos la dirección del trabajo futuro.
No podíamos ignorar las fuentes ya creadas y ampliamente utilizadas, por lo que analizamos las proporciones de todas las fuentes populares dentro de esta categoría y, a través de este estudio, llegamos a nuestras propias conclusiones y proporciones. Ahora podemos estar seguros de que, al sustituir una fuente en los diseños ya maquetados, el diseñador de interfaces no enfrentará problemas de desajuste en las doscientas pantallas diseñadas, ni se producirá un cambio drástico en el grado de negrura del texto con el mismo estilo tipográfico, pues gracias a un análisis detallado, «los pesos tipográficos» serán comparables con los de la competencia.
Medimos en unidades tipográficas relativas parámetros como «X-height», para los signos en mayúscula «H-weight», el grosor «H-stem», el grosor «H-crossbar», así como parámetros equivalentes en los signos en minúscula. Como resultado, descubrimos que la mayoría de las fuentes son muy similares entre sí, e incluso algunas son prácticamente idénticas en muchos aspectos.
También analizamos las diferencias entre los grosores de los trazos verticales en distintas variantes dentro de una misma familia tipográfica. Los resultados mostraron que estas diferencias son mínimas y, en su mayoría, siguen la fórmula de Pablo Impallari, en la que el incremento de negrura en los estilos más delgados ocurre rápidamente, mientras que en los estilos más gruesos se produce de forma más lenta y armoniosa.
No nos olvidamos de nuestros queridos clientes, colegas y amigos. Decidimos realizar un estudio de mercado cuantitativo. Para ello, elaboramos un cuestionario en línea sobre las fuentes de interfaz utilizadas por los grandes gigantes de TI, así como por las principales agencias digitales del país. Como resultado, obtuvimos más de 50 respuestas con información detallada, lo que nos llevó a reflexionar aún más sobre la composición comercial y los matices del carácter de la familia tipográfica que estamos creando.
Fase 2 — Dibujo del estilo base
Después de aprobar todas las proporciones base de la fuente y precisar los matices relacionados con las formas de los signos, comenzamos a dibujar los caracteres principales del estilo regular para comprobar nuestras hipótesis. El primer enfoque de la fuente se realizó en una cuadrícula de 5×5 unidades tipográficas. En este primer estilo se incorporaron todos los elementos que definen su identidad.
Durante la discusión colectiva del proyecto, surgió la hipótesis de que las formas de los círculos eran demasiado simples, por lo que se realizaron dos intentos para diversificarlas. El primer intento consistió en hacerlas más cuadradas, mientras que el segundo añadió segmentos rectos en los trazos verticales para observar el resultado.
En la imagen siguiente se pueden ver tres variantes de formas circulares dentro de los mismos bloques de texto:
- La primera (superior) variante es la forma base de los círculos, implementada en la primera propuesta de la fuente;
- La segunda (media) variante tiene cada elemento ovalado cuadrado en cada curva en 10 unidades tipográficas;
- La tercera (inferior) variante es la versión de los óvalos con inserciones de distancias rectas en los trazos verticales de los óvalos.
Como resultado, llegamos a la conclusión de que la primera variante es la más óptima y la que mejor responde al carácter y a las funciones de la fuente. Después de todo, la «neutralidad» es ahora nuestra amiga y nuestro amor de escuela.
Ahora, el desafío para nuestro departamento tipográfico es dotar la fuente de un carácter único. Al dibujarla, nos esforzamos por ser lo más originales posible: debemos ser conquistadores y, bajo ninguna circunstancia, repetirnos.
La composición final después de la primera iteración del dibujo de la fuente está lista. La escritura latina y cirílica se ven consistentes. La fuente entrelaza de manera orgánica y armoniosa motivos geométricos y humanistas. Su carácter se expresa en pequeños matices y detalles cuidadosamente elaborados. Todas las proporciones ajustadas cumplen con nuestros altos estándares, establecidos a partir de la investigación, el análisis detallado de las fuentes de interfaz y los resultados de la encuesta realizada a nuestros colegas, clientes y amigos.
Fase 3 — Dibujo de todos los estilos de la familia base
Comienza la etapa más interesante y compleja del desarrollo de la familia tipográfica: la creación de la primera fuente funcional, su expansión hasta convertirse en una familia tipográfica completa, la implementación de funciones OpenType, la creación del kerning, así como numerosas pruebas.
Definimos el repertorio de caracteres de la fuente y desarrollamos una codificación personalizada. Cada fuente dentro de la familia debe incluir necesariamente los signos de servicio principales, los números, el cirílico y el latín. Sin embargo, para los diseñadores es fundamental contar con una herramienta versátil en su trabajo, por lo que tomamos la decisión de ampliar significativamente el repertorio de caracteres incorporando:
a) Latín extendido (el griego y los idiomas vietnamitas se incorporarán más adelante);
b) Cirílico extendido;
c) Un amplio bloque numérico, que incluye: cifras estándar, cifras minúsculas, sus versiones tabulares, así como diversos superíndices, numeradores, denominadores e inferiores. Para todos los tipos de cifras se han previsto versiones alternativas para: 0 (forma alternativa con tachado), 1 (alternativa estilística con carácter fluido), 6 y 9 (formas alternativas cerradas);
d) Bloque extendido de signos de moneda, que incluye versiones estándar, versiones tabulares y versiones para numeradores y denominadores;
e) Números racionales en forma de una paleta ampliada de fracciones auxiliares, así como números para listas numeradas, enmarcados en círculos de dos tipos: con relleno y sin relleno (los llamados «billares»);
f) Versiones especiales de los signos de servicio adaptadas para su uso con mayúsculas (función Case Sensitive);
g) Formas alternativas para algunos signos en minúscula, que confieren a la fuente un carácter más suave y fluido;
h) Un conjunto de iconos diseñado específicamente en la estética de la fuente, pensado para su uso en diversos entornos de interfaz.
Pasamos al editor tipográfico y transferimos todos los signos dibujados en el editor vectorial al interior de la fuente. Dibujamos el primer conjunto de caracteres, comenzando por los signos de servicio más complejos y la diacrítica. Siempre debemos recordar una regla fundamental: al reemplazar una fuente de interfaz antigua en la maquetación, todo debe permanecer en su lugar. Además, al diseñar los caracteres, seguimos teniendo presente la regla de la «línea media», que cobró relevancia con la aparición de Sketch & Figma. Debemos lograr que la línea media entre los elementos ascendentes y descendentes de nuestra fuente sea similar a la de otras fuentes de interfaz. De lo contrario, el texto en los bloques de texto de los editores de interfaces modernos se desplazará hacia arriba o hacia abajo, lo que afectará directamente la maquetación. Mantenemos esto en mente al diseñar signos y contornos que sobresalen de la línea base.
Después de la primera iteración del dibujo de todos los signos, tanto textuales como no textuales, recibimos la retroalimentación del director de arte del proyecto, Pavel Emelianov, sobre la estructura visual de la fuente, así como sobre las primeras pruebas de texto y su uniformidad. Se toma una decisión difícil pero necesaria: eliminamos los compensadores visuales y refinamos el conjunto tipográfico. Nuestra «neutralidad» —nuestro amor de escuela— nos obliga a llevar todo a una lógica y secuencia unificadas.
Paralelamente, trabajamos en los dos extremos de la familia tipográfica: Thin y Black. En este proceso participa un equipo de tres personas: dos diseñadores y un responsable técnico. Dibujamos, corregimos. Dibujamos, corregimos. En esencia, se trata de un proceso técnico claro y bien estructurado.
Para el lector no familiarizado con estos detalles, explicaremos el proceso con más detalle. Hay dos tareas principales en este proceso: la primera es ajustar la anchura percibida de la fuente, por ejemplo, un peso delgado parecerá tener la misma anchura que el peso regular solo si físicamente es más estrecho. La lógica opuesta se aplica al peso más grueso: para que se perciba con la misma anchura que el regular, debe ser físicamente más ancho.
La segunda tarea es ajustar la altura percibida de los signos en minúscula del peso regular. Dado que una fuente es una construcción óptica, aumentamos la altura de los signos en minúscula en el peso más grueso en 20 unidades tipográficas y la reducimos en 10 unidades en el peso más delgado. De este modo, todos los pesos se presentan de manera consistente y parecerá que se trata de la misma fuente, solo con diferente grosor.
Con el primer estilo definido, obtenemos una referencia clara sobre cómo los signos deben relacionarse entre sí. Ahora tenemos un punto de partida sobre el cual construir los demás estilos. Como referencia de medición utilizamos las letras «H» y «O». Al aumentar o disminuir el grosor en otros estilos, cualquier signo debe cambiar proporcionalmente en relación con ellas.
Se puede observar en los dibujos cómo cambian los signos de un estilo a otro. Los caracteres se vuelven más gruesos, pero sus proporciones, estructura y carácter permanecen inalterados. Por ejemplo, la «Н» parece ligeramente estrecha y alta. La «О» también tiende más a un rectángulo que a un cuadrado, con vértices y curvaturas que no son ni afilados ni claramente cuadrados. Este mismo carácter de redondeo aparece en la «В», que visualmente parece un poco más ancha que la «Н» y un poco más estrecha que la «О». La barra horizontal se sitúa ligeramente por encima del centro, aproximadamente al nivel del travesaño de la «Н». Al analizar la relación y las proporciones de los semi-óvalos, se puede ver que todos estos detalles se trasladan de un estilo a otro.
El más difícil de desarrollar entre los tres estilos base es el Black. Para que el Black mantenga la coherencia visual con el Regular, las proporciones externas de los signos deben estar bien definidas; no podemos hacerlos tres veces más anchos solo para acomodar astas extremadamente gruesas. Tampoco podemos eliminar por completo los espacios en blanco dentro de las letras. Por ello, recurrimos a la compensación a través del espacio interno del carácter.
Algunos signos pueden simplificarse y serán simplificados:
En otros, buscamos el equilibrio mediante el refinamiento de las horizontales.
Este trabajo se realiza manualmente para cada signo. Todo es muy individual y requiere una revisión constante del resultado para evitar «pegotes» o áreas demasiado claras.
En la imagen siguiente se muestra la primera iteración del dibujo del estilo delgado realizada por el diseñador, junto con los comentarios enviados en respuesta, incorporados en la fuente por el responsable técnico. Cada color dentro de la fuente tiene un significado específico. Los diseñadores familiarizados con esta lógica comprenden de inmediato qué ha sido modificado en la fuente.
Después de la primera iteración, reducimos manualmente en 10 unidades tipográficas la altura de los signos en minúscula.
En la oficina, dentro del grupo de trabajo, se llevan a cabo debates sobre la necesidad de compensadores dentro del estilo más grueso, así como sobre la uniformidad del texto tanto entre el cirílico y el latín como entre los tres pesos tipográficos. Tomamos la decisión de eliminar también los compensadores en el estilo más grueso. Ahora apostamos por formas limpias y una lógica unificada en la construcción de todos los signos.
Al crear el estilo más grueso, en el último momento nos dimos cuenta de que todos los signos diacríticos en las letras minúsculas estaban demasiado cerca de los propios caracteres. Para evitar corregirlos manualmente, nuestro programador escribió un script en Python que permitió ajustar instantáneamente más de 300 signos, elevándolos a la altura necesaria exclusivamente para las letras minúsculas.
Elevación de signos diacríticos con la ayuda de un script
Cuando se han completado los tres diseños clave principales, comenzamos a trabajar en los diseños intermedios, que en realidad resultan ser muy precisos al interpolarlos. Esto sucede gracias a la precisión de los contornos originales. Dos ingenieros trabajan en los seis diseños intermedios, perfeccionando los contornos hasta alcanzar un estado ideal. Elaboramos especificaciones detalladas y las enviamos a producción.
En la imagen de abajo se muestra el resultado del blending (promedio) de los contornos del diseño en negrita y regular (arriba en la imagen) y la tipografía editada y perfeccionada por el ingeniero; como se puede ver, la diferencia es pequeña.
A continuación, para todos los diseños rectos, se crean versiones inclinadas de los estilos en cursiva. Este es uno de los pasos más importantes, laboriosos y, al mismo tiempo, «aburridos». Para crear las versiones inclinadas usamos el método de «semi-inclinación-semi-rotación». En realidad, estos son llamados «Oblique» y no auténticos «Italic», es decir, versiones rectas inclinadas sin modificaciones en las formas de los propios signos. La semi-inclinación-semi-rotación es un método que permite evitar la deformación por compresión en los contornos.
Dentro de la oficina, realizamos 5 versiones clave, elaboramos la documentación para los diseños realizados para los ingenieros que se integrarán al proyecto y enviamos los demás estilos a producción. La documentación es una parte muy importante en la creación de cada familia tipográfica en ciertas etapas del proyecto, ya que permite unificar el proceso de creación de la familia tipográfica entre diferentes personas.
Paralelamente a la creación de los estilos intermedios, así como a la creación de cursivas, comenzamos la parte técnica del proyecto, es decir, el kerning, las funciones OpenType y la configuración detallada del interlineado. El kerning dentro de la fuente lo hacemos «unificado», es decir, creamos un conjunto único de pares de kerning y clases de kerning para todos los estilos. Incluso dentro de nuestro equipo hay opiniones divididas sobre el kerning unificado: algunos están «a favor», otros «en contra».
Sin embargo, si al crear el kerning se tiene en cuenta el espaciado físicamente diferente en fuentes de distintos grosores (en el estilo delgado habrá un espaciado considerablemente mayor que en el regular, y mucho más en el estilo grueso), así como la diferencia de blanco en los ángulos triangulares (las diagonales en signos como «A», «X», «V» y similares pueden cambiar su ángulo dependiendo del grosor de la fuente, y por lo tanto cambiarán las compensaciones necesarias en forma de pares de kerning), entonces se puede hacer un kerning que encaje perfectamente en los tres casos extremos y, por ende, también en todos los estilos intermedios. En total obtenemos 1167 pares únicos seleccionados manualmente.
Como parte separada, creamos pares especiales de kerning para algunos signos que pueden combinarse con el espacio, para alinear el texto de manera óptima. Por ejemplo, si se escribe «Y» y un espacio, esta combinación formará un gran hueco que visualmente se percibirá como un doble espacio. Compensamos estos espacios con un par de kerning.
Hablemos un poco sobre las funciones OpenType dentro de la fuente. En esencia, esta es la parte del trabajo de los tipógrafos que casi siempre queda fuera del radar para los usuarios de fuentes. En la familia tipográfica TT Interphases, hay 32 de estas funciones. Solo hablaremos de algunas de ellas, y si deseas conocer más detalles sobre las funciones que componen la fuente, puedes consultar la especificación detallada.
a) Pocos saben que en la mayoría de las fuentes modernas existe una opción única para reemplazar los números escritos con una barra (/) por fracciones. Esta función se llama Frac y funciona de la siguiente manera: escribes 1/2, y el resultado es una fracción compacta y elegante 1⁄2.
b) Para los casos de uso de paréntesis y comillas con mayúsculas, existe la función Case. Esta permite «elevar» ciertos signos auxiliares para lograr una combinación armoniosa con las letras mayúsculas.
c) A veces se necesitan cifras tabulares y símbolos de moneda. Esto es muy útil cuando es necesario escribirlos en una columna, de manera que un número quede justo debajo del otro. Para estos casos, se diseña un conjunto especial de signos, en el que los anchos de todas las áreas de los caracteres son iguales entre sí. El conjunto deja de ser uniforme en favor de la funcionalidad y se vuelve un poco más espaciado. Esta función se llama Tnum, y para ella no solo diseñamos cifras, sino también los símbolos de moneda.
d) Para algunas fuentes, donde es necesario diferenciar el «cero» de la letra mayúscula «O», se utiliza la función Zero. Esta fuente no es una excepción. Todos los ceros en la fuente tienen versiones alternativas con una barra diagonal dentro del óvalo.
Realmente hemos añadido una gran cantidad de funciones OpenType útiles en la fuente, como salt, ordn, ccmp, sups, sinf, numr, dnom, tnum, pnum, onum, lnum, liga, dlig, calt, ss01, ss02, ss03, ss04, ss05, ss06, ss07, ss08, ss09, ss10, ss11, ss12, ss13, ss14, locl. Todas ellas están descritas en la familia tipográfica. Gracias al uso de funciones individuales o combinándolas entre sí, es posible cambiar el «carácter» de la fuente de manera casi irreconocible.
Todas las funciones son probadas y verificadas en una amplia variedad de combinaciones posibles, además de comprobar su funcionalidad en diferentes programas.
Para que la maquetación de bloques de texto sea lo más conveniente posible para los diseñadores de interfaces, realizamos un estudio de las fuentes de interfaz más populares y demandadas, así como sus parámetros técnicos que afectan al interlineado (en primer lugar, tales como Ascender (elemento ascendente), Descender (elemento descendente), Gap (espacio blanco obligatorio entre líneas), y en base a nuestra investigación, creamos una tabla consolidada, a partir de la cual derivamos nuestros propios valores.
Después de las primeras pruebas y comparaciones en la maquetación de bloques de texto con diferentes volúmenes de contenido, se observa que el interlineado es casi perfecto, pero el bloque de texto está ligeramente más alto de lo necesario. Esto no nos satisface, necesitamos que sea perfecto.
Tomamos la decisión de reducir el tamaño del Ascender y aumentar el tamaño del Gap, lo que nos proporciona el interlineado necesario y hace que el conjunto de texto se alinee prácticamente con todos los estilos de fuentes comparados.
Fase 4 — Creación de iconos
Paralelamente, al trabajo sobre la fuente principal, pensamos en cómo diseñar un conjunto de iconos para ella. El primer enfoque resulta ser fallido, ya que la tarea no estaba bien formulada y no era lo suficientemente detallada.
Nos embarcamos en una investigación, en la que estudiamos los tipos de iconos existentes, analizamos las estéticas actuales y, al final, elaboramos un encargo técnico.
Descubrimos que hay pocos iconos informativos adecuados para nuestra funcionalidad, generalmente son conjuntos vectoriales separados (y no están dentro de las fuentes). Estudiamos qué iconos (conjuntos de iconos para Laptop/ Desktop/ Phone) contienen iconos comunes, pero también otros específicos que se usan exclusivamente en determinados tipos de dispositivos. También analizamos los iconos en diferentes sistemas operativos como Windows, Android y MacOS.
Analizamos y creamos un conjunto promedio = conjunto universal de iconos. Los iconos se dividieron en 5 grupos (acciones principales, estados, secciones del sitio, documentos y carpetas, interfaz móvil) según los objetos y acciones.
En la primera etapa del trabajo, era importante entender cómo combinar los iconos con la fuente, creando una conexión entre ellos no solo a través del grosor de las líneas, sino también en la coherencia de los contornos de los iconos y las letras.
Obtenemos un boceto de los primeros iconos y los evaluamos en diferentes tamaños y sobre distintos fondos. Los ajustamos para que combinen estilísticamente bien con la fuente (por ejemplo, las formas de los redondeos y los finales de los trazos). Observamos el equilibrio entre el negro y el blanco para que las versiones Black y Thin se vean armónicas entre sí, añadiendo pequeños rellenos negros en algunos iconos.
En esta etapa del trabajo sobre los iconos, cuando ya se había elaborado el encargo técnico y se tenía una comprensión clara del conjunto principal de pictogramas, surgió la cuestión de cuánto se puede alejar de las formas convencionales. En la discusión se llegó a la conclusión de que se deben mantener las formas establecidas, pero algunos pictogramas pueden ser actualizados, como el caso de los relojes.
Diseñamos todo el conjunto de iconos para tres estilos, los editamos y ajustamos nuevamente, obteniendo una gran cantidad de iconos para los tres grosores (thin, regular, black). A partir de estos se crearán los iconos para los 9 estilos rectos.
Los pictogramas forman parte de la fuente, por lo que deben cambiar su saturación en las mismas proporciones en las que cambia cada estilo. Al trabajar este aspecto, se descubrió que el grosor principal para los pictogramas no será el stem de las letras mayúsculas, sino el stem de los caracteres especiales. Los pictogramas ajustan su peso según la lógica de la fuente, manteniendo la legibilidad sin perder claridad en los estilos gruesos.
Otra tarea técnica compleja, pero interesante, en este proyecto era el hecho de que los nombres de los glifos de los iconos no tienen un valor de Unicode, lo que significa que, al ordenar los glifos dentro de la fuente, se dispersarán en un orden aleatorio.
Cuando abramos el panel de glifos, por ejemplo, en Adobe Illustrator, veremos que algunos iconos estarán juntos, pero otros estarán distribuidos de forma aleatoria. Este enfoque aleatorio se debe evitar, por lo que estamos pensando en cómo resolver este problema.
Otro problema es que en programas como PowerPoint, los glifos sin Unicode simplemente no se mostrarán en el panel de inserción de símbolos, y no podrán ser accedidos desde el teclado.
Por lo tanto, le pedimos a nuestro programador que escriba un script llamado Unicode Filler, que rellene las celdas seleccionadas con valores Unicode de un rango libre de este estándar, manteniendo un orden específico.
De esta manera, podremos conservar nuestra secuencia de iconos al seleccionarlos desde el panel de glifos en los productos de Adobe y permitir la selección y adición de iconos en programas como PowerPoint. Además, los iconos podrán ser fácilmente copiados de un programa a otro, ¡lo cual es realmente genial!
Fase 5 — Creación de la familia monoespaciada
Desde el principio, queríamos crear una familia monoespaciada satélite para programadores, que complementara la familia principal. Analizamos las fuentes monoespaciadas más populares que se utilizan para escribir código. Estudiamos todos los matices y características de este tipo de fuentes, además de consultar con diferentes programadores.
Como resultado de la investigación, elaboramos una tabla consolidada en la que definimos los valores de las proporciones de una «fuente monoespaciada ideal». En particular, nos interesaban parámetros como: el ancho del área de la caja, las dimensiones de los stems para el estilo regular y negrita, las configuraciones técnicas del interlineado, similares a la versión regular de la fuente. El número de estilos, como en la mayoría de los casos con fuentes similares, se propuso limitar a cuatro.
Después de definir todas las proporciones y métricas clave, nos sorprendió mucho que incluso las dimensiones de los stems en los estilos regular y negrita de la fuente monoespaciada coincidieran relativamente con nuestra fuente principal. Consideramos esto como una buena señal y comenzamos a diseñar la fuente en una cuadrícula de 10×10.
Durante el proceso, mantuvimos y cuidadosamente transpusimos a la «nueva realidad» las características principales de la construcción de los signos del estilo base, específicamente su apertura (grado de apertura/cierre de los signos redondeados) y el grado de redondeo de las formas circulares.
Debido a que la fuente es monoespaciada, es decir, el ancho del área de la caja en todos sus signos es el mismo (600 unidades tipográficas), surgió la necesidad de modificar la forma de algunos signos para que el conjunto fuera uniforme y no se crearan «agujeros» ni «pegotes».
Para el equilibrio entre el blanco y el negro, decidimos reintroducir los compensadores de los que habíamos prescindido en la fuente base regular. Esto añadirá al tipo monoespaciado, además de un balance adecuado entre el blanco y el negro, también carácter. En este caso, esto es más que apropiado.
Como resultado, algunas letras resultaron ser muy anchas (como «ш», «щ», «ж», «m»), y les resultaba «difícil» encajar en el área de la caja tipográfica (600) en su forma y proporciones naturales. Para que pudieran ser legibles sin alterar su forma, compensamos el stem vertical medio.
Continuamos trabajando en las compensaciones y el equilibrio entre el blanco y el negro, lo que resultó en cambios significativos en algunos signos. Esta deformación no solo tiene un carácter estético, sino que también aporta al tipo de letra una imagen y estilo únicos que lo hacen reconocible.
Observamos cómo se ve la fuente, realizamos ajustes en los espacios entre palabras y las formas, y reforzamos los compensadores, ya que la fuente se ve bastante oscura.
Hablemos un poco sobre el tema de la composición de signos en fuentes monoespaciadas. De una forma u otra, su composición difiere de la composición de signos en nuestra fuente principal para interfaces. Realizamos una pequeña investigación cualitativa sobre fuentes monoespaciadas, analizamos lo que ya tenemos, lo que necesitamos eliminar y lo que debe añadirse a las fuentes.
Ajustamos la codificación de la fuente base TT Interphases para convertirla en la codificación necesaria para TT Interphases Mono. Eliminamos los números tabulares y los símbolos de moneda tabulares, ya que ahora no son necesarios, dado que toda la fuente es monoespaciada.
También eliminamos los iconos que creamos para la fuente principal. Suprimimos las ligaduras, ya que para los programadores, en particular, su presencia podría representar un «peligro»: en el código no debe haber reemplazo de varios signos por uno solo. Añadimos a la codificación los símbolos especiales necesarios para los programadores.
Después de probar las funciones, nos dimos cuenta de que la función Frac (responsable de las fracciones) no funcionaba, y aún debemos pensar en su operatividad. Normalmente, en este tipo de fuentes, no se implementan funciones como esta, sin embargo, decidimos mantenerla y comenzamos a trabajar en la lógica de este funcionalidad.
Al final, para que Frac funcionara correctamente, añadimos un conjunto separado de numeradores y denominadores con aperturas negativas, para que, al combinarse con la fracción, el área de la caja fuera igual a 600 unidades tipográficas. Suena complicado y poco claro, pero al final todo funcionó.
Probamos la fuente sobre un fondo oscuro, ya que generalmente se utiliza para escribir código por parte de los programadores. Pedimos a nuestro colega que nos envíe un fragmento real de código, lo remaquetamos y probamos el resultado.
El resultado es satisfactorio. La letra «о» no se confunde con el número «0», ni la «l» con el «1», todo es legible y distinguible.
Pasamos a los estilos monoespaciados inclinados. Observamos y analizamos los análogos existentes y, como siempre, creamos una tabla que tenía en cuenta las proporciones principales, así como el ángulo de inclinación. Como resultado de la investigación, se hizo evidente que el «ángulo ideal» de inclinación es de 11 grados.
Al trabajar en los estilos inclinados, decidimos divertirnos un poco y dibujamos bocetos en los que probamos diferentes formas extrañas y curiosas de los signos.
En el proceso de trabajo sobre la fuente, decidimos no hacer simplemente un estilo inclinado, sino una verdadera cursiva. A continuación, comenzó una nueva fase de bocetos. Queríamos darle carácter a la cursiva, pero sin perder la neutralidad. Como resultado, decidimos abandonar las formas extremas en favor de signos más limpios y legibles.
Cambiamos algunas formas de las letras que se utilizan tradicionalmente en los estilos de cursiva, lo que le da a los estilos inclinados un toque de «escritura a mano».
Fase 6 — Creación del hinting
El hinting es un proceso técnico complejo de optimización del diseño de la fuente para ciertos tipos de rasterizadores (pantallas, navegadores, programas). En nuestra empresa, el hinting es un proceso tecnológico separado que requiere mucho tiempo.
Inicialmente, para la creación del hinting no todos los estilos estaban listos, sino solo cinco de los nueve: Black, Regular, ExtraLight, Light y Thin. Mientras se completaban los otros estilos — se agregaban iconos y se finalizaba la parte técnica — nuestro experto en hinting, Viktor, decidió comenzar la optimización con el estilo Regular y luego ir avanzando hacia los estilos más ligeros. Es decir, después de Regular, se aplicaría el hinting en los estilos más ligeros como Light, ExtraLight y Thin.
¿Por qué son necesarios los estilos intermedios cuando se realiza el hinting de una familia tipográfica?
Normalmente, para el hinting de las fuentes TypeType utilizamos una herramienta de hinting de Microsoft llamada Visual TrueType (VTT). Sin embargo, para acelerar y mejorar el trabajo de hinting, también utilizamos un software adicional desarrollado internamente en nuestro estudio.
Una de las funciones clave de este software es transferir los hints entre fuentes de manera glifo por glifo. Cuanto más cercanos en forma (en este caso, en grosor) estén los estilos entre sí, menos errores ocurrirán al transferir la información de hinting, lo que significa que se necesitará menos trabajo manual para hacer correcciones.
En cuanto a nuestro software, este script sigue un algoritmo que busca puntos similares en un estilo adyacente en grosor y transfiere los hints cuidadosamente. Como los contornos no pueden ser completamente idénticos, en el 10-30% de los casos se presentan errores que deben corregirse manualmente. A pesar de esto, se reduce el tiempo de trabajo en el hinting ca fa5 si en un 5 veces.
Así que el primer estilo en ser procesado fue el Regular. Se realizó el auto-hinting con las herramientas de VTT. Con esta herramienta, se hizo un mapeo preliminar, se definieron los grupos de caracteres y se establecieron los valores de control para ellos. Los grupos de valores de control son valores de referencia para los caracteres cuyos contornos deben estar sincronizados entre sí tanto en ancho como en altura, por lo que los contornos de los glifos dentro de un mismo grupo tendrán características comunes.
Además de los cuatro grupos estándar que se definen automáticamente: UpperCase, LowerCase, Figure y Other, se añadieron cuatro más: Superior, OldStyle, Icon, Balls, Numr. Posteriormente, durante el proceso de trabajo, se definieron y asignaron manualmente valores de control propios para estos grupos personalizados, los cuales se utilizaron para el hinting de los caracteres dentro de estos grupos.
En total, se añadieron aproximadamente 60 valores adicionales a cada estilo, y cuanto más grueso se vuelve el estilo, más necesario es utilizar una mayor cantidad de valores para tener un control más flexible sobre los stems.
Después de utilizar el auto-hinting y antes de comenzar la edición manual del mapa de píxeles de la fuente, se aplicaron además desarrollos internos. Por ejemplo, el hinting de los signos compuestos.
En la imagen mostrada se presenta el signo Amacron, de tamaño entre 12 y 15 píxeles a una resolución de 72 dpi, utilizando la rasterización de tipo DirectWrite en el estilo Bold. Presta atención a cómo se rasteriza el signo diacrítico Macron.
En la primera línea — la rasterización del signo antes del hinting;
En la segunda — la rasterización después del auto-hinting;
En la tercera — la rasterización después de aplicar los scripts de desarrollo propio.
Después de todas las manipulaciones para preparar la fuente, finalmente pasamos al hinting en sí.
En la imagen siguiente se muestra la fuente TT Interphases Mono Regular antes del hinting. Se puede notar que en diferentes tamaños hay un problema de coherencia en el grosor de los píxeles, tanto entre los stems de un mismo glifo como entre diferentes glifos.
Para resolver este problema, se definieron transiciones de grosor de píxeles para un aumento uniforme del stem con el incremento del tamaño de la fuente. Se restauró la coherencia entre todos los stems de la fuente, y los contornos ahora se ven uniformes.
Lo mismo se muestra en la siguiente imagen entre los signos numéricos y sus versiones minúsculas en TT Interphases DemiBold, donde las minúsculas comienzan a volverse más delgadas demasiado pronto en comparación con las versiones regulares.
Por supuesto, hay que entender que el principal objetivo del hinting es la legibilidad de la fuente, y para lograr este objetivo, a veces es necesario sacrificar la coherencia de los stems debido a la falta de espacio en blanco.
Por ejemplo, en la imagen de abajo se muestra que en tamaños de 12, 13, 15 y mayores, todos los stems tienen el mismo grosor, pero en el tamaño 14, debido a la falta de espacio en los glifos del euro, la grivna y la rupia, las horizontales se hicieron intencionalmente más delgadas.
De no ser así, sin distorsionar los contornos, debido a los grosores iguales, se podría repetir la situación que se puede ver en la parte superior del signo de la grivna en el tamaño 14, en esta misma imagen a la derecha.
En los estilos finos, la situación es un poco diferente: además de la coherencia, también es necesario restaurar el grosor de los stems. En la imagen de abajo se puede ver que algunos stems se vuelven tan finos que desaparecen por completo.
Es importante entender que en todas las imágenes mostradas anteriormente bajo el título «Después del hinting», el resultado es en realidad el producto final de todo el trabajo realizado en los contornos de cada glifo: la sincronización de los grosores, la corrección de distorsiones y desigualdades, el control de la posición de los trazos y la restauración de la legibilidad.
Por ejemplo, para mejorar la legibilidad del signo Hbar en TT Interphases ExtraBold, los píxeles de la barra superior fueron desplazados manualmente; tales operaciones se denominan deltas.
Para cada fuente de la familia TT Interphases, se utilizaron alrededor de 170 deltas, lo que da un total de 3740 deltas para los 18 estilos de la familia principal y los 4 estilos de la familia monoespaciada. Es importante entender que, cuanto más delgado sea el estilo, probablemente se necesitarán menos deltas en él.
En general, cuanto menos deltas se utilicen, mejor, porque cada instrucción delta ocupará un byte separado en el archivo de la fuente, y muchas veces esto es muy importante para los servicios y sitios web masivos.
Además, como ejemplo, en la letra cirílica mayúscula «И» en TT Interphases Medium Italic, no estábamos satisfechos con el grosor de la diagonal: en tamaños pequeños, se volvió demasiado delgada.
También se debe señalar que en algunos símbolos se corrigieron las posiciones de los componentes. Un componente en una fuente es un contorno que se usa con frecuencia y al cual simplemente hacemos referencia en los glifos donde se utiliza. El componente se toma del contorno principal como una referencia, por lo que si se cambia el contorno principal, el componente en los demás signos donde se usa también cambiará.
Además, el archivo final de la fuente pesará mucho menos, ya que se ahorra espacio dentro del archivo debido a la ausencia de información innecesaria.
Por ejemplo, en la imagen de abajo, en el signo de la «bola de billar» 0×2473, el componente del cero se desplazó una unidad tipográfica (un valor muy pequeño) en relación con el componente del dos, lo que hizo que en ciertos tamaños el componente del cero estuviera un píxel más abajo (lo cual es un cambio bastante grande).
Cabe destacar que logramos reducir el tamaño de los archivos de fuentes con hinting manual en un promedio del 18% en comparación con el auto-hinting en TT Interphases, y en el caso de TT Interphases Mono, un 5%. Es posible que esto sea una buena noticia para algunos de nuestros muy respetados usuarios de nuestras fuentes, que las utilizan activamente en la web.
Fase 7 — Creación de estilos variables
Para comenzar, abrimos todos los estilos que formarán la base de nuestra fuente variable. El número óptimo de maestros para crear una fuente variable varía entre tres y cinco. Para crear TT Interphases Variable, elegimos cuatro maestros principales: Thin, Regular, Bold, Black.
Trabajamos con fontinfo, añadimos el maestro mediante copia, configuramos el valor del peso y corregimos los nombres de la fuente para asegurarnos de que se muestre correctamente en los programas. Añadimos el eje de variabilidad que necesitamos, en nuestro caso Weight.
Escribimos todos los demás estilos como instancias y asignamos los grosores de los stems de nuestros estilos a través de «=». Una vez que las pestañas Names, Axes, Masters e Instances estén correctamente completadas, podemos pasar a verificar la compatibilidad de los contornos.
Si nuestros maestros son compatibles, todos estarán resaltados en verde en el panel Layers. A veces es necesario ajustar manualmente los puntos de inicio y verificar las direcciones de los contornos, ya que su desajuste también puede causar distorsiones durante la interpolación.
En el caso de TT Interphases, necesitamos añadir tres puntos a la letra «M» en el estilo Black. Para ello, seleccionamos cada punto de forma secuencial y presionamos Ctrl+D, o hacemos clic derecho sobre el punto y seleccionamos «Duplicate». Después de añadir los puntos faltantes, presionamos «Match Masters» y verificamos la variabilidad en la capa Instance o en el panel Preview.
Una vez que todas las configuraciones de verificación estén completas, podemos comenzar con tranquilidad el testeo de la fuente variable.
Conclusión
Gracias por tomarse el tiempo para leer la historia de la creación de la familia tipográfica TT Interphases. Nos esforzamos por contar de manera detallada el proceso interno de la estudio de tipografía y mostrarles todas las etapas de la creación de una familia tipográfica compleja.
Equipo del proyecto TT Interphases
El equipo que trabajó en la creación de la familia tipográfica TT Interphases estuvo compuesto por nueve personas, incluidos diseñadores de fuentes, ingenieros de fuentes y gerentes. La lista completa de los participantes en el proyecto es la siguiente:
Ivan Gladkikh — Jefe de proyecto;
Irina Tatarskaya — Gerente de proyecto;
Pavel Emelyanov — Director artístico, autor de la investigación y el estilo base;
Marina Khodak — Diseñadora tipográfica senior, líder técnica del proyecto;
Ksenia Karataeva — Diseñadora tipográfica, autora de la subfamilia monoespaciada y la investigación sobre iconos;
Nadezhda Polomoshnova — Diseñadora tipográfica, autora de los iconos;
Yuri Nakonechny — Ingeniero técnico, tester;Nadir Rakhimov — Diseñador tipográfico, ingeniero técnico;
Viktor Rubenko — Ingeniero técnico, programador y especialista en hinting.
Enlaces útiles
Specimen | Presentación gráfica del proyecto | Comprar o probar la fuente
