Mini tutorial: una guía para las combinaciones de fuentes

“La tipografía es una arquitectura bidimensional, basada en la experiencia y la imaginación, y guiada por reglas y legibilidad”. —Herman Zapf

Hace solo unos pocos años, los diseñadores estaban severamente restringidos en su elección de fuentes web. Las opciones generalmente se limitaban a las fuentes del sistema y esperaban que los visitantes del sitio tuvieran instaladas esas fuentes.

Si bien las fuentes web eran técnicamente posibles a finales de los 90, no se generalizaron hasta 2009, cuando el formato WOFF estuvo disponible y formó parte de los estándares abiertos del W3C. Eso abrió un mundo completamente nuevo de opciones tipográficas para los diseñadores.

Y ahí radica el dilema: ahora que hay literalmente miles de tipos de letra disponibles para los diseñadores web, ¿cómo se hace para crear combinaciones de fuentes que funcionen bien juntas y respalden el contenido que se presenta?

Una buena tipografía y el uso de las mejores combinaciones de fuentes elevan un diseño de sus pares y crean una experiencia de usuario más agradable. Las combinaciones de tipos efectivas agregan interés visual a un diseño que puede mantener a un visitante en la página por más tiempo.

El tipo incorrecto, por el contrario, puede hacer que el contenido sea más difícil de leer y menos placentero para la persona que lo lee.

Aprender a combinar fuentes de manera efectiva es un paso importante en la educación de un diseñador, y debe perfeccionarse y mejorarse continuamente. Los diseñadores que dominan la tipografía pueden hacer que incluso el diseño más simple sea más efectivo. Seguir las pautas básicas de tipografía para combinar fuentes es el mejor lugar para comenzar. Una vez que se dominan esas "reglas", los diseñadores pueden diversificarse y experimentar para crear combinaciones tipográficas que doblen o rompan esas reglas.

Tipo Características

Con los cientos de miles de tipos de letra disponibles, tratar de averiguar por dónde empezar puede resultar abrumador, incluso para los diseñadores avanzados. Comprender las características de los diferentes tipos de letra es el primer paso para aprender a combinarlos de manera efectiva.

Aprender cómo se relacionan estas características entre sí permite a los diseñadores combinar fuentes con confianza y experimentar con combinaciones inesperadas. La experimentación y la práctica es donde los diseñadores pueden realmente perfeccionar sus habilidades de combinación de fuentes y crear diseños que los diferencien de otros expertos. A veces, escuchar su intuición es la mejor manera de crear una combinación tipográfica que realmente brille.

Clasificación

La clasificación tipográfica es uno de los conceptos más fundamentales para entender. Hay cuatro clasificaciones principales para aprender: serif, sans serif, script y decorativo.

Los tipos de letra Serif y Sans Serif son adecuados tanto para los títulos como para el cuerpo del texto. Sin embargo, los tipos de letra Script (a veces también llamados fuentes manuscritas) y decorativas solo son aceptables para titulares y títulos, u otros fragmentos pequeños de texto.

Las fuentes serif se consideran más legibles para fragmentos largos de texto (como el cuerpo del texto), especialmente en diseños impresos, donde la característica serif puede ayudar a guiar la vista del lector a lo largo de cada línea. Pero los tipos de letra sans serif también pueden ser muy legibles y sobresalir en tamaños más pequeños (como los que se usan para subtítulos o metainformación).

Las sans serif también son más populares para su uso en la web y se cree que son más legibles que los tipos de letra serif. Parte de eso se debe a los primeros días de la informática, cuando las pantallas de baja resolución hacían que las fuentes serif fueran algo borrosas, dependiendo del tamaño. Con las modernas pantallas HD y Retina, esto es un problema menor y los tipos de letra serif y sans serif se pueden usar de manera efectiva.

La combinación de tipos de letra de diferentes clasificaciones suele ser más simple que la combinación dentro de clasificaciones, ya que existe un nivel de contraste entre las fuentes ya integradas. Dicho esto, también es posible combinar tipos de letra en la misma clase de manera efectiva, siempre que se consideren otras características.

Peso

El peso se refiere al grosor de una fuente dentro de un tipo de letra. Delgado, regular, seminegrita, negrita y negro son ejemplos de pesos.

El contraste entre pesos es fundamental a la hora de combinar tipografías. Combinar una fuente muy gruesa con una muy ligera a menudo se siente desequilibrado. Pero combinar tipos de letra que tienen el mismo peso también puede ser un desafío.

En cambio, especialmente cuando se comienza con combinaciones de fuentes, es más fácil encontrar tipos de letra que tengan diferencias de peso notables pero no extremas. Los diseñadores pueden diversificarse a partir de ahí hacia distinciones más prominentes.

Estilo

Si bien el estilo a veces se usa indistintamente con la clasificación, en este caso, se refiere a una fuente que puede ser normal , cursiva u oblicua .

Al combinar fuentes en las que se utilizan diferentes estilos, es importante asegurarse de que los estilos en cursiva u oblicuo funcionen tan bien juntos como el estilo normal. A veces, los estilos en cursiva son muy diferentes del estilo normal de la misma fuente, lo que puede hacer que las fuentes que de otro modo funcionarían bien juntas de repente entren en conflicto.

Contraste

El contraste en la combinación de tipos de letra puede ser complicado. Muy poco contraste puede hacer que las fuentes choquen, mientras que demasiado contraste puede hacer lo mismo.

El contraste al combinar fuentes se refiere a cualquier forma en que las fuentes son diferentes, incluida la clasificación, el peso, el estilo y la estructura.

Al comenzar, es mejor concentrarse en el contraste entre solo una o dos de esas cosas, mientras se asegura de que las otras sean muy similares. El peso es una de las formas más fáciles de crear contraste entre las fuentes. Como ya se mencionó, demasiado contraste en el peso puede ser tan discordante como muy poco.

Otra manera fácil de crear contraste es combinar diferentes clasificaciones de fuentes, como sans serif y serif o script y serif, etc. En estos casos, es esencial asegurarse de que el estilo de las dos fuentes coincida.

Por ejemplo, combinar una fuente más informal como Amatic SC con una fuente muy formal como Baskerville chocará en lugar de contrastar. Pero combinar algo como Amatic SC con otra fuente informal como Josefin Slab funciona maravillosamente.

altura X

La altura de la X se refiere a la altura de los caracteres individuales dentro de un tipo de letra, específicamente la x minúscula. Los tipos de letra con alturas x similares funcionarán mejor juntos que aquellos con alturas x diferentes.

Estructura

La estructura subyacente de un tipo de letra incluye todas sus características, además de cosas como la forma básica de los caracteres y su espaciado. Crear contraste con la estructura de las fuentes es un método establecido para combinar fuentes. Pero es una buena idea elegir fuentes que tengan al menos algunos elementos estructurales en común (como la altura de la x o el peso del estilo "normal") en lugar de aquellas que son muy diferentes.

Estado animico

El estado de ánimo es una de las áreas más subjetivas de la tipografía. Se refiere a qué tan formal o informal es un tipo de letra, así como si es divertido, femenino, masculino, casual, serio, etc.

Por ejemplo, Comic Sans es una fuente extremadamente informal que no es apropiada para usar en la mayoría de las situaciones. Bickham Script, por otro lado, es muy formal pero da una impresión equivocada para cosas como la correspondencia comercial.

Al combinar fuentes, es importante encontrar tipos de letra con estados de ánimo similares. Combinar una fuente lúdica con una muy seria será discordante a la vista.

Decoración, Color y Textura

Estas cosas no son características inherentes de los tipos de letra, pero son útiles cuando se combinan fuentes. Unificar (o crear más contraste) a través del color, la decoración (como subrayar) y la textura puede ser una técnica muy eficaz.

Combinaciones de fuentes efectivas

Existe un suministro aparentemente interminable de sitios con tipografía hermosa, junto con un suministro igualmente interminable de sitios con tipografía mala o mediocre. Estudiar sitios que lo hacen bien es una excelente manera de aprender a combinar fuentes cuando los diseñadores están comenzando o están tratando de llevar sus habilidades al siguiente nivel.

Work Notes combina el tipo de letra serif Adobe Caslon Pro con sans serif Interstate para crear una combinación de tipos que tiene un guiño a la tradición sin sentirse obsoleto o anticuado. La combinación de diferentes grosores y estilos añade un interés visual adicional y hace que la tipografía parezca más compleja de lo que realmente es.

Adjuvant Capital utiliza el tipo de letra serif moderno y ligeramente caprichoso Orpheus Pro combinado con el tipo de letra sans serif moderno de GT America. Para una empresa de servicios financieros, esta es una opción muy moderna pero funciona bien con su misión de inversión global socialmente responsable.

Bloomscape utiliza el tipo de letra casual serif Morion junto con el sans serif Raisonne para crear un diseño tipográfico llamativo y moderno. Morion no sería necesariamente una opción obvia para el tipo de cuerpo debido a sus formas de letras más decorativas, pero cuando se usa en un tamaño apropiado (como lo es aquí), es excelente para fragmentos más cortos de cuerpo de texto. Raisonne tiene formas de letras decorativas similares, lo que hace que las dos fuentes web funcionen maravillosamente juntas.

Vogue utiliza el moderno y elegante tipo de letra Savoy serif junto con el grotesco sans serif Franklin Gothic, que se diseñó originalmente en 1902. La combinación de los dos crea un diseño tipográfico exclusivo que atrae a la audiencia culta a la que se dirige la revista.

La revista de estilo de vida sureña Garden & Gun tiene una tipografía más compleja en su sitio que las otras incluidas aquí, lo que realmente la distingue. El sitio utiliza cuatro tipos de letra principales: los títulos de los artículos principales son Domaine Display serif; el cuerpo del texto y algunos titulares en la página de inicio tienen la fuente serif Domaine Text; la metainformación, la navegación y los encabezados de las secciones usan el sans serif Avenir Next; y los encabezados de sección adicionales en la página de inicio están en Domaine Sans Display.

El uso de varias fuentes dentro de una familia tipográfica más grande es una forma comprobada de crear un diseño tipográfico complejo que combine a la perfección. Agregar Avenir Next rompe las cosas y agrega interés visual adicional.

Tu elección de tipografía es tan importante como lo que haces con ella.

—Bonnie Siegler

Conclusión

Las combinaciones de fuentes efectivas son un sello distintivo de un buen diseño. Los diseñadores deben dominar esta habilidad si quieren crear diseños excepcionales que los diferencien de sus contemporáneos.

Considere las pautas incluidas aquí como puntos de partida para explorar cómo combinar el tipo de manera efectiva. Una base sólida permite una experimentación más eficiente, sin gastar horas en combinaciones completamente inadecuadas. A partir de aquí, los diseñadores pueden practicar la creación de su propio estilo y métodos para combinar fuentes de manera efectiva, desviándose de las pautas según sea necesario con más confianza de que su producto final será una delicia para los usuarios.

Lectura adicional en el blog de diseño de Toptal:

• Diseño para la legibilidad: una guía para la tipografía web (con infografía)
• Comprender los matices de la clasificación tipográfica
• Diseccionando las complejidades de la anatomía de la tipografía (con infografía)
• Cómo estructurar una jerarquía tipográfica efectiva
• Estilos tipográficos para diseño web e impreso