Una guía para combinar fuentes

La combinación de fuentes es una de las partes más complicadas de la tipografía. Aquí hay una guía, combinada con un ejemplo para ayudarlo a obtener combinaciones correctas de fuentes.

Esta guía se basa en el capítulo 5 del libro Better Web Typography for a Better Web de Matej Latin. El libro consta de 13 capítulos a través de los cuales el lector diseña y construye un sitio web de ejemplo.

Esta guía también está disponible en chino tradicional.

¿Realmente necesitas más de una fuente?

La mala tipografía en la web en los primeros años de Internet a menudo se atribuía a la escasa gama de fuentes disponibles. Pero ya aprendimos que la tipografía no se trata simplemente de elegir fuentes. Uno de sus objetivos (probablemente el principal) es presentar la información de manera legible y fácil de consumir. Antes de comenzar a buscar una fuente para agregar a nuestro diseño y combinarla con nuestra fuente de texto del cuerpo, debemos preguntarnos: ¿realmente necesitamos más de una fuente? No solo agregue uno por el simple hecho de hacerlo. No hay una regla en la tipografía que diga que cuantas más fuentes se usen mejor (lo contrario probablemente sea más cierto). No hay garantía de que agregar otra fuente a su sitio web mejore su tipografía. Me gusta mantener mi tipografía simple y sólida. Como una máquina: cuantas menos piezas móviles, menos probabilidades hay de que se descomponga.

La mala tipografía en la web en los primeros años de Internet a menudo se atribuía a la escasa gama de fuentes disponibles. Pero ya aprendimos que la tipografía no se trata simplemente de elegir fuentes. Uno de sus objetivos (probablemente el principal) es presentar la información de manera legible y fácil de consumir. Antes de comenzar a buscar una fuente para agregar a nuestro diseño y combinarla con nuestra fuente de texto del cuerpo, debemos preguntarnos: ¿realmente necesitamos más de una fuente? No solo agregue uno por el simple hecho de hacerlo. No hay una regla en la tipografía que diga que cuantas más fuentes se usen mejor (lo contrario probablemente sea más cierto). No hay garantía de que agregar otra fuente a su sitio web mejore su tipografía. Me gusta mantener mi tipografía simple y sólida. Como una máquina: cuantas menos piezas móviles, menos probabilidades hay de que se descomponga.

Obra tipográfica del siglo XVIII en una sola fuente, Baskerville, del propio John Baskerville.
Es una regla segura no mezclar diferentes estilos de letras en la misma página, o diferentes tipos de letra en el mismo libro.
- Eric Gill

Eric Gill, un hombre bastante controvertido pero un gran tipógrafo (entre muchas otras cosas que hizo), tenía una opinión similar. No hay mucho que pueda hacer mejor con más fuentes que con una sola. Intenta desafiarte a ti mismo y crea un sitio web usando solo una fuente. Aunque solo sea para experimentar y divertirse, creo que todos deberían intentarlo, ya que hay mucho que aprender de él.

Recientemente rediseñado matejlatin.co.uk. Centrado en la tipografía pero usando solo una fuente.

Recientemente rediseñé mi sitio web personal. Una de las cosas que quería destacar era el minimalismo que es una gran parte de mi vida. Para hacerlo mejor, decidí usar una sola fuente. También quería que el sitio web se centrara en la tipografía (literalmente, el 95% es tipografía) además de eso, lo que hizo que el desafío fuera aún más difícil. Estaba buscando una fuente sans-serif limpia, nítida y simple que enfatizaría eso aún más. Al final elegí Gibson de Canada Type. Tiene una sensación moderna, pero un poco amigable. Y funciona muy bien cuando se configura en grandes tamaños. Conseguir la tipografía adecuada para ese sitio web fue un desafío, pero logré hacerlo utilizando diferentes tamaños, pesos y solo dos colores: gris oscuro y gris medio.

Incluí ese ejemplo en el libro, porque es excelente para mostrar cuánto se puede hacer con una sola fuente. No solo por maestros de tipografía como John Baskerville, sino también por diseñadores autodidactas como yo. ¿Crees que todavía necesitas otra fuente para tu proyecto? No te preocupes, sigue leyendo.

Un proceso de cuatro pasos para combinar fuentes.

Si aún cree que necesita más de una fuente para su sitio web, necesitará un proceso sistemático que lo guíe. La que describo aquí es una versión adaptada de la que se describe en el libro Combinar tipos de letra de Tim Brown. Aquí están los cuatro pasos:

  1. Encuentre una fuente de anclaje para el texto de su cuerpo principal
  2. Encuentra algunas fuentes secundarias para posibles combinaciones
  3. Evaluar la combinación.
  4. Eliminar / elegir combinación de fuentes.
El proceso anterior supone que está comenzando con la fuente para el texto del cuerpo ya seleccionada. El proceso puede revertirse fácilmente si primero desea comenzar con una fuente de título.

Hay dos enfoques para combinar fuentes y cinco pautas que pueden ayudarlo con el paso 3 del cuadro anterior. Vamos a ver.

Dos enfoques para evaluar combinaciones de fuentes

El contraste y la armonía son los dos principios más básicos cuando se trata de diseño, arquitectura y arte. Ambos son cruciales cuando se trata de la tipografía también. Algunas evaluaciones descritas en este proceso solo funcionarán como una combinación contrastante, algunas solo como una armónica y otras como ambas. Echemos un vistazo a un ejemplo de la vida real.

Combinaciones contrastantes

Echa un vistazo a la foto de la oficina de arriba. ¿Cómo lo describirías? Se siente moderno, ¿verdad? Pero hay algo más. También se siente cálido. Inusual para oficinas con muebles modernos, casi futuristas. Sin embargo, este sí. La pared de ladrillo trae esta sensación de calidez y comodidad a una habitación que se vería fría sin ella. Lo mismo se puede aplicar a la combinación de fuentes.

¿Cómo podemos aplicar esto a la tipografía? Tomemos la fuente Baskerville para nuestro texto principal. Baskerville fue diseñado por John Baskerville en 1754. Era una fuente moderna en ese momento, ya que estaba empujando los límites de lo que era posible en la tipografía. Sin embargo, se percibe como un clásico en estos días. Evoca sentimientos de confianza y calidez. Basado en un experimento, realizado por Errol Morris, es la fuente más confiable. Ahora vamos a complementarlo con un Futura solo en mayúsculas para encabezados. Futura fue diseñado por Paul Renner en 1927. Es una fuente geométrica sans-serif. Era una fuente moderna sans-serif geométrica cuando se diseñó por primera vez y todavía se siente moderna hasta el día de hoy.

Nuestro diseño se ve rico. Lujoso. Tiene una historia que contar. Pero lo más importante: funciona. Utiliza dos fuentes clásicas de diferentes períodos de tiempo. Cada uno viene de lo contrario de la escala entre moderno / frío y clásico / cálido. Juntos, son como fuego y hielo que se convierten en agua corriente.

Combinaciones armónicas

La armonía es exactamente lo contrario del contraste. Entonces, si miras la foto de la oficina de arriba, notarás lo moderna que se ve en todo momento. Espacio minimalista sin decoraciones, combinado con muebles de aspecto moderno. ¿Cómo podríamos replicar algo así en la tipografía?

Utilizamos Din Alternate para el título y Helvetica para la fuente del cuerpo en la combinación anterior. Ambos tienen un ligero toque industrial y moderno. Hay muchas características que hacen que las dos fuentes sean similares pero, sin embargo, son lo suficientemente diferentes como para funcionar bien como una combinación.

Cinco pautas para combinar fuentes

Combinando fuentes con altura x similar

¿Recuerdas cuando te dije que recordaras la altura x en el capítulo sobre la anatomía de los tipos de letra? Aquí es donde resulta útil. Otra forma de evaluar una combinación de fuentes es observar de cerca sus alturas x para ver si coinciden. Deberían estar muy cerca en el peor de los casos. Las fuentes con altura x similar funcionan mejor juntas ya que tienen un peso visual similar. Especialmente cuando se trata de ritmo vertical (algo que veremos en el próximo capítulo).

Arriba: Futura y Baskerville tienen una altura x similar que los refuerza como una buena combinación de fuentes.

Esta combinación funciona con contraste o armonía. Elija fuentes que tengan altura x coincidente o fuentes que tengan alturas x muy diferentes. No te vayas con algo intermedio.

Combinando fuentes de la misma fundición

Noté algo en todo el trabajo de tipografía que hice hasta ahora. Al elegir las fuentes, tiendo a volver a algunas fundiciones de tipos que las produjeron. FontFont, con sede en Alemania, es uno de ellos. Soy fanático del trabajo de Erik Spiekermann. Dalton Maag, con sede en Londres, es otra. Hubo ocasiones en que me tomé el tiempo para explorar simplemente todas las fuentes que provienen de estas dos fundiciones y casi no había ninguna que no me gustara. Parece que sus estilos coinciden con lo que busco más comúnmente. Y eso no es una coincidencia.

Verá, cuando un diseñador de tipos comienza a trabajar en una fuente nueva, rara vez comienza desde cero. Es más común que comiencen a diseñar una nueva fuente sobre una existente. Usan la misma estructura pero aún así presentan un diseño que es original. Pero debido a esa estructura subyacente compartida, las fuentes generalmente pueden funcionar bien juntas. Por lo tanto, combinar fuentes que provienen de la misma fundición es una buena apuesta.

Combinando fuentes del mismo autor

Similar a combinar fuentes basadas en la fundición que las diseñó, las combina según su autor. Como se mencionó, las fundiciones de tipos comúnmente usan una estructura subyacente base para producir diferentes fuentes. Probablemente sea aún más común que los autores de fuentes hagan eso. Combinar, por ejemplo, las fuentes que diseñó Adrian Frutiger es casi una apuesta segura.

Arriba: Univers en el fondo y Apollo delineado en primer plano (Ambos diseñados por Adrian Frutiger). Observe lo diferentes que son en estilo, pero muchos puntos clave se cruzan casi a la perfección.

Todavía recomiendo poner las dos fuentes una al lado de la otra y compararlas, tal como lo hicimos con Apollo y Univers arriba. Intente establecer si una combinación funciona o no, de manera similar a cómo comparamos las fuentes basadas en x-height, pero concéntrese más en las proporciones generales. En este punto, debes estudiar realmente las dos fuentes. Te dije que esto lleva tiempo, ¿recuerdas? Esta combinación debe usarse como armónica, no como una contrastante.

Combinando fuentes basadas en la era histórica

La evaluación de fuentes basadas en el período de tiempo funciona bien con contraste o armonía. Puede elegir dos fuentes que estén muy separadas o del mismo período de tiempo. Ambos deberían funcionar.

Hay casi 200 años separando la creación de Baskerville y Futura.

Creo que este enfoque funciona mejor con fuentes que fueron diseñadas antes de la revolución digital. En este momento, se están diseñando demasiadas fuentes. Emparejarlos únicamente por el hecho de que son del mismo período de tiempo podría no ser suficiente.

Usando super tipos de letra

Existen los llamados super tipos de letra. Tipos de letra que vienen en estilos sans-serif y serif. Merriweather y Merriweather Sans son excelentes ejemplos. También lo son Roboto y Roboto Slab. Simplemente no puedes equivocarte usando los estilos de una superfamilia. Esta puede ser una excelente manera de comenzar a desarrollar sus habilidades para combinar fuentes.

Algunos tipos de letra vienen en serif y sans serif (o incluso más estilos). No te puedes equivocar si combinas estos.

Un ejemplo de combinar fuentes

Esta guía es una adaptación del capítulo 5 del libro Better Web Typography for a Better Web, por lo que en esta etapa, los lectores tienen 4 capítulos y ya pasaron por el proceso de elegir la fuente principal (ancla).

Fuente de ancla

OK, aprendimos mucho en el último capítulo. Pongamos en uso ese conocimiento recién adquirido. Siguiendo el proceso descrito anteriormente, debemos comenzar con la fuente de anclaje. Tenemos eso, ya que decidimos qué queríamos usar en el Capítulo 3 cuando elegimos FF Meta. Vayamos directamente al paso 2.

El ejemplo de contenido para el sitio web establecido en FF Meta: la fuente que elegimos anteriormente en el libro.

Encontrar candidatos para posibles combinaciones

Estamos buscando una fuente que podamos usar para los encabezados. Revisemos los puntos clave que escribimos del resumen cuando buscábamos la fuente del texto del cuerpo:

  • el sitio web necesita sentirse moderno y actualizado; su contenido debe ser fácil de leer para atender a los entusiastas de la tecnología ocupados pero curiosos
  • el sitio web debe estar centrado en el contenido, con muy pocos anuncios de alta calidad y bien orientados
  • como cualquier sitio web con ese tipo de tráfico y audiencia, debe funcionar en diferentes dispositivos.

Escribamos algunos puntos clave que nos ayudarán a encontrar la fuente del encabezado, tal como lo hicimos para el texto del cuerpo:

  • definitivamente sans-serif (necesitamos algo que sea de alto contraste en comparación con nuestra fuente de texto del cuerpo)
  • necesita sentirse moderno, lo que se traduce en una mayor altura x
  • necesita funcionar bien con tamaños de letra más grandes
  • cuantos más pesos y estilos mejor
  • No se requieren funciones OpenType (además de las ligaduras, rara vez uso otras funciones OpenType con encabezados)
  • solo necesita el subconjunto de caracteres en inglés
  • necesita rendir bien en las pantallas comunes (tanto móviles como de escritorio).

Con eso escrito, estamos listos para comenzar a buscar. Arranquemos TypeKit y encontremos algunos candidatos. Vamos a configurar los filtros para que podamos ver solo sans-serif, recomendado para títulos, peso pesado y altura x grande. La altura x grande coincidirá con lo que estamos buscando, pero también con la altura x de FF Meta que elegimos para el texto del cuerpo.

Reviso los 40 resultados que obtuve y preselecciono los siguientes: Korolev, FF Enzo, Quatro, Camingodos y JAF Facit. Solo cinco; Creo que tengo una buena idea de lo que estoy buscando.

Evaluar combinaciones de fuentes

Debido a que solo hay cinco, podemos sumergirnos directamente y comenzar a experimentar con ellos. Añádalos a nuestro proyecto en TypeKit y cárguelos en nuestro sitio web de ejemplo. Luego copiamos algunos de los títulos de nuestro artículo de contenido de ejemplo y los agregamos.

El ejemplo de código de este capítulo se puede ver en CodePen.

Al principio, vamos a evaluar a los candidatos con su tamaño y color predeterminados. Tal vez podamos eliminar algunos de ellos sin excavar demasiado. De hecho, hay algo que no se siente bien con JAF Facit para que podamos eliminarlo. Algunos caracteres, como "w" e "y", en Quatro tienen un diseño bastante único y se destacan. Mal. Vamos a tacharlo de la lista. A veces realmente es así de simple. Echar un vistazo más de cerca a FF Enzo revela que es un estilo claramente humanista (contraste notable y ligeramente inclinado) que no es algo que estamos buscando. Ese es el tercero de nuestra lista.

Eliminar combinaciones de fuentes

Pudimos eliminar tres combinaciones en la etapa de evaluación, lo que nos deja con dos posibles candidatos: Korolev y Camingodos. Echemos un vistazo más de cerca a estos dos y experimentemos más.

Camingodos también tiene un ligero sentimiento humanista, pero no es tan claro como lo fue con FF Enzo. Los caracteres son ligeramente más estrechos y la altura x es grande. Hay una cierta sensación cuadrada de la que no estoy seguro. Parece que está tratando de ser tecnológico pero no está yendo del todo (debido a ese lado humanista). Echemos un vistazo más de cerca a Korolev.

Korolev se siente único. Caracteres muy estrechos, gran altura x y parece que está ligeramente condensado. También tiene una sensación cuadrada pero no tan obvia como Camingodos. Probemos los dos en el color que probablemente usarán: rojo.

Probemos también un peso un poco más ligero: medio en lugar de negrita.

Ahora eso es interesante. Korolev literalmente cobra vida cuando es un poco más ligero. Ahora está en completo contraste con la fuente del texto del cuerpo. Camingodos, por otro lado, se ve extraño. Carece de identidad y con eso no resiste bien la fuente del texto del cuerpo. El principal problema es que está en la cerca: es demasiado similar a la fuente del texto del cuerpo para ser realmente contrastante y, sin embargo, en cierto grado contrastante. Lo que contrasta con la tipografía es que debe ser clara o inexistente. Esto hace que el Korolev sea un claro ganador. Nuestro resultado final se ve así:

Vea el ejemplo en vivo en betterwebtype.com/book/c5.

Más información sobre una mejor tipografía web en el libro

A partir de aquí, el libro explora el ritmo en la tipografía web, las escalas modulares y lo que significa "tipografía significativa", componiendo páginas, tipografía web receptiva y también se sumerge en 4 capítulos adicionales sobre micro tipografía. Este es el sitio web de ejemplo en vivo que se construye a medida que avanzas en los capítulos.

Combinar fuentes de hoja de trucos

Creé una hoja de trucos imprimible a 2 caras sobre la combinación de fuentes basada en esta guía. Consíguelo, imprímelo y comienza a crear increíbles combinaciones de fuentes.

Obtenga su hoja de trucos para combinar fuentes →

Otras cosas interesantes de Better Web Type

Hay más cosas interesantes en el sitio web Better Web Type: un curso gratuito de tipografía web, un juego de memoria de fuentes, un juego de aprendizaje para dar forma a párrafos perfectos, un cuestionario, etc.

Visita betterwebtype.com →