Sentinel with Tungsten and Verlag

Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ's Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

It's the interplay between fonts that gives them energy. The more distant the moods in a typographic palette, the friskier the design will be. Here, three fonts with distinctive silhouettes have been chosen for their contrasting dispositions: the unabashed toughness of Tungsten is a foil for both Archer'ssweetness, and the cheekiness of Gotham Rounded.

Tungsten from $99

Gotham Rounded fr. $179

Archer from $149

Three type families with nineteenth century roots, thrown together in a cheerful typographic riot. Choosing type families with different features helps prevent redundancy: here, the brawny variations ofThe Proteus Project are reserved for headings, Sentinel's six weights of romans and italics recommend it to text, and Knockout's nine different widths helps the sans serif fill in the cracks.

Proteus Project from $99

Knockout from $169

Sentinel from $199

What do a neoclassical modern, a suave sans serif, and a sporty slab have in common? All are meditations on precision, though each has a different texture. H&FJ Didot achieves its crispness through the thinnest possible serifs, Verlag through its insistently geometric motifs, and our new Vitessetypeface through its pairing of machined edges and racy curves. Together, these three mechanical faces create a dramatic typographical tension.

H&FJ Didot from $299

Verlag from $199

Vitesse from $199

A clever way to combine typefaces with similar proportions is to assign each a different purpose, and to limit each to a specific range of sizes. Here, two hard-working typefaces are assigned supporting roles: the seriffed Mercury serves for text, and the sans serif Gotham furnishes all the annotations. The star of the show is the sophisticated Hoefler Titling, which preserves its spotlight by appearing only occasionally, and always in large sizes.

Mercury Text from $199

Hoefler Titling from $199

Gotham from $169

La creacin de grandes combinaciones de fuentes es un arte, no una ciencia. En efecto, la belleza de la tipografa no tiene lmites. Aunque no hay reglas absolutas que seguir, es crucial entender y aplicar las mejores formas de combinar fuentes en un diseo. Cuando usamos con diligencia y atencin, esos principios siempre nos darn resultados convenientes. Hoy daremos un vistazo de cerca a algunas de las mejores prcticas de combinacin de fuentes as como tambin algunos errores que debemos evitar.

Combinar una Sans Serif con una Serif

Uno de los principios ms populares para creacin de combinaciones de fuentes es aparear un encabezadp sans serif con un cuerpo serif. esta es una combinacin clsica, y casi imposible cometer un error. En el siguiente ejemplo - un artculo tpico tenemos Trade Gothic Bold No.2 apareado con Bell Gothic del lado izquierdo. Ambas son fuentes de tipo sans serif. Sin embargo, tienen personalidades muy diferentes.

Colocar esas fuentes juntas crea un conflicto no deseado en el diseo. Trade Gothic quiere ir a los hechos, pero Bell Gothic quiere tener un poco de diversin. Este tipo de tensin puede que no sea parte del diseo por lo que debe ser evitado. Ahora veamos el ejemplo de la derecha. Se ha reemplazado Bell Gothic por la fuente Sabon. Sabon, es una fuente de tipo serif, que trabaja muy bien con Trade Gothic. Ambas estn enfocadas en la claridad con formas altamente legibles por su equilibrio entre alto y ancho. Ambas tienen la misma misin, por lo que hacen una gran combinacin.

Permitir Clasificaciones Similares

Las fuentes con la misma clasificacin, pero de familias diferentes, pueden fcilmente crear discordia cuando

se combinan. Sus personalidades diferentes no se llevan bien y crean una especie de barro tipogrfico si no le presta la suficiente atencin. En el ejemplo de la izquierda tenemos un encabezado con la fuente Clarendon Bold, la cual es una slab serif. El cuerpo est escrito con fuente Officina Serif que tambin es slab serif. Las fuentes slab serif son conocidas por sus distintas personalidades, y les gusta dominar cualquier rea de un diseo donde son utilizadas. Colocarlas juntas puede crear una tensin innecesaria y antiesttica.

Ahora veamos el ejemplo de la derecha. La fuente Clarendon Bold en el encabezado es apareada con una fuente mucho ms neutral como la New Baskerville. New Baskerville que es una versatil transicional fuente serif con formas anchas que va agradablemente con la pesadez de Clarendon. Al mismo tiempo, se repliega y permite a Clarendon tener la personalidad que desee. Esta combinacin ofrece un resultado muy agradable. Escoger fuentes de diferentes clasificaciones al principio evita tensin innecesaria en el diseo ms adelante.

Asignar Roles Distintos

Una forma fcil para combinar mltiples fuentes de diferentes tipos es disear un esquema basado en roles para cada fuente o tipo, y atenerse a l. En el siguiente ejemplo, se ha usado la fuente Akzidenz Grotesk Bold en mayscula contnua en la parte superior con el nombre del autor. Luego usaron Rockwell Bold para el titular del artculo. El resumen y el cuerpo son fuente Bembo en diferentes tamaos. Finalmente, el titular de segundo nivel es fuente Akzidenz Grotesk Medium.

Nos ahorramos la altamente distintiva fuente Rockwell para titulares que requieran llamar la atencin, y retrocedimos a un titular conservador con tipo sans serif y cuerpo serif en una combinacin discutida anteriormente. Pero en este caso, hay grandes variaciones de tamao, anchos y funciones para cada fuente usada. 4 fuentes de 3 tipos estn siendo usados aqu, y han sido colocadas juntas en un diseo coherente, porque cada una tiene un rol fijo asignado y est muy claramente definida en la jerarqua tipogrfica.

Contrastar Anchos de Fuentes

Una forma segura de enturbiar la jerarqua tipogrfica es fallar al distinguir los elementos de dicha jerarqua. Adems de las variaciones de tamao, asegrate de crear diferencias claras en los anchos de las letras para que sirva de gua a los ojos del lector. En el ejemplo de la izquierda, tenemos un contraste de tamaos decente pero no suficiente contraste en el ancho de la fuente. La fuente Myriad Light, cuando se pone por encima de la fuente Minion Bold, tiende a perder autoridad visual.

A la derecha, tenemos la misma fuente Myriad Black sobre la Minion, con un ancho normal. Con este pequeo cambio ya no hay confusin con el texto que llamar la atencin al ojo del lector.

Crear Variedad de Colores Tipogrficos

El color tipogrfico es el efecto combinado de las variaciones de ancho, tamao, ancho de trazo, espaciado de letras y otros factores. Una forma fcil de ver los colores tipogrficos es enfocar la mirada sobre el bosquejo hasta que no puedas leer nada ms, pero puedes an ver el texto en trminos de su valor tonal. Si enfocas la mirada hasta quedar bizco sobre los ejemplos a continuacin, notars que en el boceto de la izquierda llega un momento en que se convierte en una gota mediocre de texto, que se hace ms densa en la parte inferior. En cambio, en el boceto de la derecha se retiene la jerarqua visual, aunque no puedas leer lo que dice.

El uso del color tipogrfico refuerza la jerarqua visual de una pgina, lo cual va siempre unido al significado y la intencin del mensaje.

No mezclar emociones
Uno con frecuencia pasa por alto el error tipogrfico de no reconocer el humor o la personalidad inherente de cada fuente. Si! Las fuentes tienen personalidad. Ellas cambian algunos grados en funcin del contexto, pero no en gran manera. Es un problema no identificar la personalidad de una fuente para un trabajo particular, pero es doble problema aadir otra fuente obteniendo una mezcla pobre. En el ejemplo de la izquierda, hay una fuente Franklin Gothic Bold emparejada con Souvenir. La emocin bsica de la fuente Franklin Gothic es estoicismo, robustez, fuerza, pero con un sentido refinado de elegancia y misin. No es una fuente mimosa, pero es funcional. Por otro lado, Souvenir es divertida, casual, y muy hermosa. Estos dos tipos de letra juntas viene a ser como un guardia del Palacio de Buckingham que ignora a una hermosa y divertida nia a sus pies tratando de hacerlo reir. Este tipo de mezcla de emociones no funcionan muy bien. Mezclar emociones en los tipos de fuente pueden desviar la atencin a la tipografa en lugar de al mensaje lo cual da como resultado un diseo pobre.

A la derecha, tenemos la misma fuente Souvenir con un compaero de juegos ms dispuesto. Futura Bold tiene mucha personalidad, pero est ms dispuesta a adaptarse a Souvenir por varias razones. Primero, ambos tipos de letras tienen alto x ancho. Ambos tipos de letras tienen caracteres anchos y formas de letra muy circular. Ambos tipos de letra tiene una peculiaridad sutil, pero no excesivamente prominentes. Ninguna domina a la otra. Ambas trabajan, en este ejemplo, para crear un ambiente divertido y optimista. No hay sensacin de tensin indebida.

Contrastar con Neutralidad

Un diseo tipogrfico limpio y legible requiere atencin y cuidado a las tensiones intencionales y no intencionales. Un lugar donde mirar una tensin no intencional es en el choque de personalidades en la seleccin de fuentes que hagas. Si uno de tus tipos tiene mucha personalidad, necesitas un tipo secundario que ocupe un rol neutral. En nuestro ejemplo, la pareja de la columna de la izquierda son Dax Bold con Bernhard Modern. Es una pobre seleccin por al menos dos razones obvias que examinaremos.

Primero, Dax tiene formas estrechas y una gran altura mientras que Bernhard Modern es muy ancha y una de las que tienen menor altura entre los tipos populares. Segundo, Dax es un tipo informal, moderno y brillante. Es un gran opcin para un aficionado a la tecnologa, un mensaje inteligente, moderno. Bernhard Modern por otra parte es clsica, tranquila, sofisticada y con un toque de intimidad. Combinar la falta de qumica entre estos atributos, junto con las personalidades muy diferentes de cada tipo de letra y tendrs un mal funcionamiento de la tipografa . Veamos una mejor opcin. La pareja de la columna derecha son Dax Bold con Caslon. Caslon es un tipo de fuente de estilo antiguo, pero que ha sido modernizada y saneada para combinar armnicamente con otros tipos de fuente. Trabaja satisfactoriamente con Dax en este contexto. Fjate como se puede ver la personalidad de Dax en el encabezado, pero Caslon se mantiene un paso atrs y entrega el mensaje al lector. En este contexto, Caslon funciona muy bien como opcin neutral para soportar a la extravagante Dax.

Evitar Combinaciones muy Disparatadas

Cuando se crea mucho contraste por seleccionar tipos de fuente que son muy diferentes, puede crearse un desbalance visual lo cual trabaja en contra de nuestro diseo. A la izquierda tenemos fuente Antique Olive Nord una fuente extremadamente pesada combinada con Garamond Narrow. El contraste y sus efectos son evidentes. En la mayora de los casos, este contraste extremo, ms all de llamar la atencin, produce incomodidad.

A la derecha, la fuente Antique Olive Nord ha sido reemplazada por una ms tenue Antique Olive Bold. Garamond Narrow podra ser reemplazada por un Garamond normal, pero una mejor opcin despus de algn deliberacin fue Chaparral. Chaparral tiene un equilibrio alto x ancho, y sobre todo es ms moderna y subsecuentemente ms neutral para combinar la presencia idiosincrtica de Antique Olive Bold.

Cuida la Simpleza Usa solo dos familias de fuentes

Por el gran esfuerzo que conlleva ordenar una librera de tipos buscando la combinacin correcta, es frecuente que fcilmente pasemos por alto lo obvio y tomemos la opcin ms fcil: atascarnos en el uso de dos tipos de fuentes usando una combinacin clsica de sans serif y sans. En el ejemplo siguiente, se ha creado una clara jerarqua visual, con un alto grado de variedad, creando un sentido de fortaleza y de interesante color tipogrfico, todo esto mientras se incrementan la legibilidad. Y todo se hizo con solo dos tipos de letra. Aunque, estamos usando un total de cinco fuentes: tres Helvetica Neues y dos Garamonds.

Por qu se logr este trabajo sin tanto esfuerzo? Varios factores entran en juego aqu. Primero,, cuando usamos diferentes fuentes de la misma familia, ests obteniendo un alto grado de compatibilidad visual sin trabajo adicional. Segundo, se ha seleccionado las combinaciones probado y verificado de usar una familia de fuente clsica neutral para el encabezado y una familia clsica neutral para el cuerpo. Ambas, Helvetica Neue y Garamond, tienen distintas personalidades neutrales, y pueden tejer complejos diseos juntas porque se ha mantenido una estricta jerarqua visual. La planificacin de reglas y su seguimiento, con las familias de fuentes correctas, pueden lograr grandes resultados con un mnimo de esfuerzo.

Usar Tamaos Diferentes

Guardamos uno de los principios ms simples para el final: usa tamaos de puntos diferentes para crear contraste y distincin. En el ejemplo de la izquierda, el encabezado y el cuerpo sangran juntos en una fea bola de texto. Utilice el mtodo de mirar fijamente el texto en este ejemplo. An con los ojos entornados mira el ejemplo de la derecha y vers la dramtica diferencia.

En la derecha, se usan las mismas dos fuentes, pero con diferentes tamaos. Thesis Sans Italic ha sido resaltada significativamente. mientras que New Century Schoolbook ha sido reducida a un tamao legible, aunque ms complementario. Usar diferentes puntos ayuda a distinguir la jerarqua tipogrfica e incrementa la variedad de color tipogrfico.

En Conclusin
Es un hecho que no hay reglas rpidas ni concretas acerca de cmo combinar familias de fuentes que pueda evitar que el proceso de la seleccin correcta consuma tiempo y por lo tanto sea exhaustivo. Pero s es til tener a la mano un conjunto de principios tiles, as como entender las situaciones de ciertos tipos para lograr guiar el proceso tan rpido como sea posible a un resultado tipogrfico placentero.