Las mejores técnicas para combinar fuentes
Etiquetas: Claves, Fuentes, Tipografía
La creación de grandes combinaciones de fuentes es un arte, no una ciencia. En efecto, la belleza de la tipografía no tiene límites. Aunque no hay reglas absolutas que seguir, es crucial entender y aplicar las mejores formas de combinar fuentes en un diseño. Cuando usamos con diligencia y atención, esos principios siempre nos darán resultados convenientes. Hoy daremos un vistazo de cerca a algunas de las mejores prácticas de combinación de fuentes – así como también algunos errores que debemos evitar.
En el siguiente ejemplo - un artículo típico – 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 diseño. Trade Gothic quiere ir a los hechos, pero Bell Gothic quiere tener un poco de diversión. Este tipo de tensión puede que no sea parte del diseño 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 están enfocadas en la claridad con formas altamente legibles por su equilibrio entre alto y ancho. Ambas tienen la misma misión, por lo que hacen una gran combinación.
Permitir Clasificaciones Similares
Las fuentes con la misma clasificación, pero de familias diferentes, pueden fácilmente crear discordia cuando se combinan. Sus personalidades diferentes no se llevan bien y crean una especie de barro tipográfico si no le presta la suficiente atención.
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 también es slab serif. Las fuentes slab serif son conocidas por sus distintas personalidades, y les gusta dominar cualquier área de un diseño donde son utilizadas.
Colocarlas juntas puede crear una tensión innecesaria y antiestética.
Ahora veamos el ejemplo de la derecha. La fuente Clarendon Bold en el encabezado es apareada con una fuente mucho más 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 combinación ofrece un resultado muy agradable.
Escoger fuentes de diferentes clasificaciones al principio evita tensión innecesaria en el diseño más adelante.
Nos ahorramos la altamente distintiva fuente Rockwell para titulares que requieran llamar la atención, y retrocedimos a un titular conservador con tipo sans serif y cuerpo serif en una combinación discutida anteriormente. Pero en este caso, hay grandes variaciones de tamaño, anchos y funciones para cada fuente usada.
4 fuentes de 3 tipos están siendo usados aquí, y han sido colocadas juntas en un diseño coherente, porque cada una tiene un rol fijo asignado y está muy claramente definida en la jerarquía tipográfica.
En el ejemplo de la izquierda, tenemos un contraste de tamaños 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 pequeño cambio ya no hay confusión con el texto que llamará la atención al ojo del lector.
Si enfocas la mirada hasta quedar bizco sobre los ejemplos a continuación, notarás que en el boceto de la izquierda llega un momento en que se convierte en una gota mediocre de texto, que se hace más densa en la parte inferior. En cambio, en el boceto de la derecha se retiene la jerarquía visual, aunque no puedas leer lo que dice.
El uso del color tipográfico refuerza la jerarquía visual de una página, lo cual va siempre unido al significado y la intención del mensaje.
En el ejemplo de la izquierda, hay una fuente Franklin Gothic Bold emparejada con Souvenir. La emoción básica de la fuente Franklin Gothic es estoicismo, robustez, fuerza, pero con un sentido refinado de elegancia y misión. 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 niña 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 atención a la tipografía en lugar de al mensaje lo cual da como resultado un diseño pobre.
A la derecha, tenemos la misma fuente Souvenir con un compañero de juegos más dispuesto. Futura Bold tiene mucha personalidad, pero está más 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 sensación de tensión indebida.
En nuestro ejemplo, la pareja de la columna de la izquierda son Dax Bold con Bernhard Modern. Es una pobre selección 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 opción para un aficionado a la tecnología, un mensaje inteligente, moderno. Bernhard Modern por otra parte es clásica, tranquila, sofisticada y con un toque de intimidad. Combinar la falta de química entre estos atributos, junto con las personalidades muy diferentes de cada tipo de letra y tendrás un mal funcionamiento de la tipografía .
Veamos una mejor opción. 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 armónicamente con otros tipos de fuente. Trabaja satisfactoriamente con Dax en este contexto. Fíjate como se puede ver la personalidad de Dax en el encabezado, pero Caslon se mantiene un paso atrás y entrega el mensaje al lector. En este contexto, Caslon funciona muy bien como opción neutral para soportar a la extravagante Dax.
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 mayoría de los casos, este contraste extremo, más allá de llamar la atención, produce incomodidad.
A la derecha, la fuente Antique Olive Nord ha sido reemplazada por una más tenue Antique Olive Bold. Garamond Narrow podría ser reemplazada por un Garamond normal, pero una mejor opción – después de algún deliberación – fue Chaparral. Chaparral tiene un equilibrio alto x ancho, y sobre todo es más moderna y subsecuentemente más neutral para combinar la presencia idiosincrática de Antique Olive Bold.
En el ejemplo siguiente, se ha creado una clara jerarquía visual, con un alto grado de variedad, creando un sentido de fortaleza y de interesante color tipográfico, 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, estás 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 clásica neutral para el encabezado y una familia clásica neutral para el cuerpo.
Ambas, Helvetica Neue y Garamond, tienen distintas personalidades neutrales, y pueden tejer complejos diseños juntas porque se ha mantenido una estricta jerarquía visual. La planificación de reglas y su seguimiento, con las familias de fuentes correctas, pueden lograr grandes resultados con un mínimo de esfuerzo.
En el ejemplo de la izquierda, el encabezado y el cuerpo sangran juntos en una fea bola de texto. Utilice el método de mirar fijamente el texto en este ejemplo. Aún con los ojos entornados mira el ejemplo de la derecha y verás la dramática diferencia.
En la derecha, se usan las mismas dos fuentes, pero con diferentes tamaños. Thesis Sans Italic ha sido resaltada significativamente. mientras que New Century Schoolbook ha sido reducida a un tamaño legible, aunque más complementario.
Usar diferentes puntos ayuda a distinguir la jerarquía tipográfica e incrementa la variedad de color tipográfico.
Combinar una Sans Serif con una Serif
Uno de los principios más populares para creación de combinaciones de fuentes es aparear un encabezadp sans serif con un cuerpo serif. esta es una combinación clásica, y casi imposible cometer un error.En el siguiente ejemplo - un artículo típico – 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 diseño. Trade Gothic quiere ir a los hechos, pero Bell Gothic quiere tener un poco de diversión. Este tipo de tensión puede que no sea parte del diseño 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 están enfocadas en la claridad con formas altamente legibles por su equilibrio entre alto y ancho. Ambas tienen la misma misión, por lo que hacen una gran combinación.
Permitir Clasificaciones Similares
Las fuentes con la misma clasificación, pero de familias diferentes, pueden fácilmente crear discordia cuando se combinan. Sus personalidades diferentes no se llevan bien y crean una especie de barro tipográfico si no le presta la suficiente atención.
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 también es slab serif. Las fuentes slab serif son conocidas por sus distintas personalidades, y les gusta dominar cualquier área de un diseño donde son utilizadas.
Colocarlas juntas puede crear una tensión innecesaria y antiestética.
Ahora veamos el ejemplo de la derecha. La fuente Clarendon Bold en el encabezado es apareada con una fuente mucho más 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 combinación ofrece un resultado muy agradable.
Escoger fuentes de diferentes clasificaciones al principio evita tensión innecesaria en el diseño más adelante.
Asignar Roles Distintos
Una forma fácil para combinar múltiples fuentes de diferentes tipos es diseñar 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 mayúscula contínua en la parte superior con el nombre del autor. Luego usaron Rockwell Bold para el titular del artículo. El resumen y el cuerpo son fuente Bembo en diferentes tamaños. Finalmente, el titular de segundo nivel es fuente Akzidenz Grotesk Medium.Nos ahorramos la altamente distintiva fuente Rockwell para titulares que requieran llamar la atención, y retrocedimos a un titular conservador con tipo sans serif y cuerpo serif en una combinación discutida anteriormente. Pero en este caso, hay grandes variaciones de tamaño, anchos y funciones para cada fuente usada.
4 fuentes de 3 tipos están siendo usados aquí, y han sido colocadas juntas en un diseño coherente, porque cada una tiene un rol fijo asignado y está muy claramente definida en la jerarquía tipográfica.
Contrastar Anchos de Fuentes
Una forma segura de enturbiar la jerarquía tipográfica es fallar al distinguir los elementos de dicha jerarquía. Además de las variaciones de tamaño, asegúrate de crear diferencias claras en los anchos de las letras para que sirva de guía a los ojos del lector.En el ejemplo de la izquierda, tenemos un contraste de tamaños 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 pequeño cambio ya no hay confusión con el texto que llamará la atención al ojo del lector.
Crear Variedad de Colores Tipográficos
El color tipográfico es el efecto combinado de las variaciones de ancho, tamaño, ancho de trazo, espaciado de letras y otros factores. Una forma fácil de ver los colores tipográficos es enfocar la mirada sobre el bosquejo hasta que no puedas leer nada más, pero puedes aún ver el texto en términos de su valor tonal.Si enfocas la mirada hasta quedar bizco sobre los ejemplos a continuación, notarás que en el boceto de la izquierda llega un momento en que se convierte en una gota mediocre de texto, que se hace más densa en la parte inferior. En cambio, en el boceto de la derecha se retiene la jerarquía visual, aunque no puedas leer lo que dice.
El uso del color tipográfico refuerza la jerarquía visual de una página, lo cual va siempre unido al significado y la intención del mensaje.
No mezclar emociones
Uno con frecuencia pasa por alto el error tipográfico de no reconocer el humor o la personalidad inherente de cada fuente. Si! Las fuentes tienen personalidad. Ellas cambian algunos grados en función 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 añadir otra fuente obteniendo una mezcla pobre.En el ejemplo de la izquierda, hay una fuente Franklin Gothic Bold emparejada con Souvenir. La emoción básica de la fuente Franklin Gothic es estoicismo, robustez, fuerza, pero con un sentido refinado de elegancia y misión. 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 niña 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 atención a la tipografía en lugar de al mensaje lo cual da como resultado un diseño pobre.
A la derecha, tenemos la misma fuente Souvenir con un compañero de juegos más dispuesto. Futura Bold tiene mucha personalidad, pero está más 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 sensación de tensión indebida.
Contrastar con Neutralidad
Un diseño tipográfico limpio y legible requiere atención y cuidado a las tensiones intencionales y no intencionales. Un lugar donde mirar una tensión no intencional es en el choque de personalidades en la selección 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 selección 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 opción para un aficionado a la tecnología, un mensaje inteligente, moderno. Bernhard Modern por otra parte es clásica, tranquila, sofisticada y con un toque de intimidad. Combinar la falta de química entre estos atributos, junto con las personalidades muy diferentes de cada tipo de letra y tendrás un mal funcionamiento de la tipografía .
Veamos una mejor opción. 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 armónicamente con otros tipos de fuente. Trabaja satisfactoriamente con Dax en este contexto. Fíjate como se puede ver la personalidad de Dax en el encabezado, pero Caslon se mantiene un paso atrás y entrega el mensaje al lector. En este contexto, Caslon funciona muy bien como opción 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 diseño.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 mayoría de los casos, este contraste extremo, más allá de llamar la atención, produce incomodidad.
A la derecha, la fuente Antique Olive Nord ha sido reemplazada por una más tenue Antique Olive Bold. Garamond Narrow podría ser reemplazada por un Garamond normal, pero una mejor opción – después de algún deliberación – fue Chaparral. Chaparral tiene un equilibrio alto x ancho, y sobre todo es más moderna y subsecuentemente más neutral para combinar la presencia idiosincrática de Antique Olive Bold.
Cuida la Simpleza — Usa solo dos familias de fuentes
Por el gran esfuerzo que conlleva ordenar una librería de tipos buscando la “combinación correcta”, es frecuente que fácilmente pasemos por alto lo obvio y tomemos la opción más fácil: atascarnos en el uso de dos tipos de fuentes usando una combinación clásica de sans serif y sans.En el ejemplo siguiente, se ha creado una clara jerarquía visual, con un alto grado de variedad, creando un sentido de fortaleza y de interesante color tipográfico, 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, estás 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 clásica neutral para el encabezado y una familia clásica neutral para el cuerpo.
Ambas, Helvetica Neue y Garamond, tienen distintas personalidades neutrales, y pueden tejer complejos diseños juntas porque se ha mantenido una estricta jerarquía visual. La planificación de reglas y su seguimiento, con las familias de fuentes correctas, pueden lograr grandes resultados con un mínimo de esfuerzo.
Usar Tamaños Diferentes
Guardamos uno de los principios más simples para el final: usa tamaños de puntos diferentes para crear contraste y distinción.En el ejemplo de la izquierda, el encabezado y el cuerpo sangran juntos en una fea bola de texto. Utilice el método de mirar fijamente el texto en este ejemplo. Aún con los ojos entornados mira el ejemplo de la derecha y verás la dramática diferencia.
En la derecha, se usan las mismas dos fuentes, pero con diferentes tamaños. Thesis Sans Italic ha sido resaltada significativamente. mientras que New Century Schoolbook ha sido reducida a un tamaño legible, aunque más complementario.
Usar diferentes puntos ayuda a distinguir la jerarquía tipográfica e incrementa la variedad de color tipográfico.