La combinación correcta de fuentes es esencial para una experiencia de lectura agradable, pero elegir las correctas puede ser confuso. Desea crear una combinación que sea visualmente intrigante pero clara, y no siempre es obvio por dónde empezar.
Para ayudarlo a lograr el equilibrio adecuado, esta publicación desglosará los principios clave de una buena combinación de fuentes y le mostrará cómo aplicarlos a sus proyectos de diseño. Clava estos principios y obtendrás la combinación perfecta de fuentes cada vez.
El contraste es la única razón por la que creamos combinaciones de fuentes para empezar. Las fuentes contrastantes permiten al lector diferenciar fácilmente entre varias partes del texto, como los encabezados y el cuerpo del texto. Además, el contraste hace que el texto sea visualmente más interesante, lo que ayuda a mantener la atención del lector.
Sin embargo, ¿a qué nos referimos exactamente con “contraste”? Cuando decimos que las fuentes contrastan, simplemente queremos decir que son lo suficientemente diferentes en apariencia. Para una ilustración, eche un vistazo a la siguiente imagen:
Por otro lado, así es como se ve cuando dos fuentes no contrastan lo suficiente:
Para asegurarse de que su emparejamiento tenga suficiente contraste, elija fuentes que difieran en las siguientes áreas:
Peso
El peso se refiere a qué tan audaz o ligera es una fuente.
Por ejemplo, Lato (la fuente de encabezado en nuestra primera imagen de ejemplo anterior) viene en cinco pesos. De más claro a más oscuro, son:
- Delgado
- Luz
- Regular
- Atrevido
- Negro
El número de pesos disponibles variará según la fuente que elija; lo importante es asegurarse de que haya suficiente contraste de peso entre las fuentes que empareja.
Tamaño de punto
Esto es sólo el tamaño del texto. Observe cómo en la primera imagen de ejemplo anterior, el texto del encabezado es significativamente más grande que el texto del cuerpo.
Color tipográfico
Esto se refiere a la oscuridad o la claridad de un bloque de texto, un rasgo que se enfatiza cuando entrecierras los ojos en el texto en cuestión. Si entrecierra los ojos en la primera imagen de ejemplo de arriba, verá que el título aparece mucho más oscuro que el texto del cuerpo.
Factores como el espacio entre líneas (interlineado), el espacio entre letras (interletraje) y el tamaño de fuente afectan el color tipográfico. La clave es asegurarse de que las fuentes elegidas contrasten lo suficiente en esta área.
Principio n.º 2: mantenga las cualidades clave similares entre las fuentes
Si bien el contraste es importante para el emparejamiento de fuentes exitoso, demasiado contraste puede distraer e incluso incomodar al lector, lo que lo lleva a hacer clic.
Para asegurarse de que sus fuentes no contrasten demasiado, debe tratar de mantener similares las siguientes características de fuente:
Altura X
La altura de X se refiere a la altura del carácter ‘x’ en la fuente elegida. A menudo (aunque no siempre), dos fuentes con una altura x similar se combinarán bien.
Por ejemplo, eche un vistazo al siguiente gráfico. Esta imagen compara las alturas x de Montserrat y Cardo. Esta similitud en la altura de la x es el comienzo de un emparejamiento de fuentes exitoso.
Montserrat (izquierda) y Cardo (derecha) tienen alturas x similares.
Súper familia de fuentes
Súper familia se refiere a un conjunto extendido de fuentes que comparten ciertas características clave. Puede ver las superfamilias como variaciones de un tema tipográfico central, generalmente una forma de carácter básica.
Debido a que las fuentes de la misma familia comparten la misma forma base, se emparejan de forma muy natural.
Por ejemplo, tome esta combinación de PT Sans Bold y PT Serif. La similitud crea una experiencia visual agradable, pero todavía hay suficiente contraste para mantener las cosas interesantes:
Ánimo
El ‘estado de ánimo’ de una fuente se refiere a sus cualidades emocionales inefables. Son los adjetivos que usamos para describir la forma en que se ‘siente’ la fuente, ya sea juguetona, misteriosa, seria, triste o cualquier otra emoción.
El estado de ánimo de la fuente es subjetivo, pero es una de las partes más importantes del emparejamiento de fuentes. Mezclar fuentes de estados de ánimo incompatibles puede descarrilar incluso el mejor contenido.
Por ejemplo, echa un vistazo a esta combinación de Modak e Indie Flower. Los estados de ánimo simplemente no coinciden.
Por otro lado, esta combinación de Fjalla One y Average es mucho más exitosa en la forma en que combina los estados de ánimo de las fuentes:
Principio #3: Use Sans Serif para el tipo de título y Serif para el tipo de cuerpo
Si desea una fórmula segura para el emparejamiento exitoso de fuentes, no puede equivocarse con una fuente de encabezado sans serif y una fuente de cuerpo serif. Las fuentes sans serif tienen una calidad sencilla que hace que sus encabezados se destaquen, y las fuentes serif generalmente son más fáciles de leer, lo que las hace perfectas para el cuerpo del texto.
Seguir este principio le permite emparejar con éxito fuentes muy similares. Esta combinación de Droid Sans y Droid Serif muestra el principio en acción:
Dicho esto, al aplicar esto, aún debe tener en cuenta los otros principios del emparejamiento de fuentes. Como explica Fonts.com :
el hecho es que existen muchos tipos de letra sans serif que son más legibles en cualquier tamaño que algunos diseños serif. Sea cual sea el estilo que elija, tome nota de las características particulares y la legibilidad general del diseño.
¡La legibilidad es su objetivo por encima de todo! Sin embargo, en general, usar sans serif para encabezados y serif para el cuerpo del texto es un lugar ideal para comenzar.
Principio #4: Pruebe las fuentes en diferentes variaciones
Cuando está creando un emparejamiento de fuentes, no es suficiente basarlo en la apariencia de las dos fuentes en su forma ‘predeterminada’. Si está eligiendo tipografía para un blog o sitio web , debe esperar que los autores empleen texto en negrita, cursiva y posiblemente incluso cursiva en negrita en sus artículos. Además, debe esperar que los autores creen bloques de texto de diferentes longitudes.
Como tal, es crucial probar sus dos fuentes con estas variaciones. El no hacerlo puede conducir a algunos resultados poco atractivos.
Por ejemplo, aquí hay una combinación perfectamente respetable de Raleway Bold (título) y Libre Baskerville (cuerpo):
Este emparejamiento funciona bien, siguiendo los principios descritos en este artículo.
Sin embargo, las cosas se ven muy diferentes cuando cambiamos Libre Baskerville a Libre Baskerville Regular Italic y usamos una mayor cantidad de cuerpo de texto:
En esta iteración, Libre Baskerville choca con Raleway Bold y la legibilidad sufre.
Estos conflictos de fuentes no siempre son evidentes de inmediato, por lo que es fundamental que los revele probando el emparejamiento de fuentes en tantas variaciones como sea posible.
Principio n.º 5: estudie el emparejamiento exitoso de fuentes
“Estudia los maestros” es un consejo común en todas las disciplinas creativas, y no es diferente cuando se trata de combinar fuentes. Una de las mejores maneras de comenzar a crear sus propias combinaciones de fuentes es estudiar las realizadas por otros diseñadores y descubrir qué las hace funcionar.
Para ayudarlo a comenzar, aquí hay algunos lugares para explorar diferentes combinaciones de fuentes en acción:
- Canva Font Combinations : de los creadores del programa de diseño gráfico Canva , esta herramienta genera combinaciones basadas en la fuente que elijas.
- Typ.io : Typ.io recopila ejemplos de combinaciones de fuentes exitosas de toda la web, desglosándolas para que pueda ver qué las hace funcionar.
- Par de fuentes : el par de fuentes «lo ayuda a emparejar las fuentes de Google «, mostrándole posibles combinaciones de fuentes y permitiéndole experimentar con sus propias combinaciones.
- Sitio del día de Typewolf : una colección de combinaciones de fuentes que presenta un nuevo ejemplo cada día.
- Combinador de fuentes : una herramienta que le permite probar sus emparejamientos con el texto y los elementos de diseño de su elección.
Le sugerimos que estudie estos sitios para ver cómo sus ejemplos usan (y desafían) los principios discutidos en este artículo.
Principio #6: Buscar retroalimentación
Cuando trabajas en un proyecto durante demasiado tiempo, puedes cegarte ante sus imperfecciones. Pasas tanto tiempo mirando un emparejamiento de fuentes que no puedes encontrar ningún defecto en él, incluso si tiene un problema evidente.
Para evitar pasar por alto estos problemas, le recomendamos que busque comentarios sobre sus combinaciones de fuentes.
A quién le pregunte dependerá de la naturaleza de su proyecto, pero le recomendamos que pregunte a tantos tipos de personas diferentes como sea posible. Los colegas, mentores, lectores y clientes (tanto actuales como potenciales) son un juego justo.
Trate de buscar hilos comunes en lo que dicen estas personas. Si todos encuentran el mismo problema, entonces algo debe cambiar.
Sobre todo, debe dar la máxima prioridad a lo que dicen los lectores y clientes, ya que su compromiso y facilidad de lectura es primordial. Si bien la aprobación de sus mentores y colegas es gratificante, no paga las cuentas.
Principio #7: Confía en tu instinto
En última instancia, el emparejamiento de fuentes es un arte, no una ciencia. Como tal, hay situaciones en las que solo necesita confiar en su intuición.
Si algo sobre el emparejamiento de fuentes parece estar mal, probablemente lo sea. Incluso si aplica todos los principios de este artículo al pie de la letra, algunos emparejamientos simplemente se sentirán mal. No ignores este sentimiento, deja que te guíe.
A veces, solo necesita modificar una combinación de fuentes hasta que se sienta bien, así que no tenga miedo de experimentar.
Conclusión
Como en todos los asuntos de buen diseño, el emparejamiento de fuentes es un tema complicado. Requiere que equilibres el contraste con la similitud y el interés con la legibilidad. Sin embargo, en última instancia, su objetivo es brindarle a su lector la mejor experiencia posible.
Si aplica los principios de este artículo (junto con otros fundamentos del diseño ), puede estar seguro de que creará una combinación de fuentes que deleitará a sus lectores y mejorará la legibilidad de su escritura.
Para crear excelentes combinaciones de fuentes, tenga en cuenta estos principios clave:
- El contraste es clave.
- Mantenga las cualidades clave similares entre las fuentes.
- Use sans serif para el tipo de título y serif para el tipo de cuerpo.
- Pruebe pares de fuentes en diferentes variaciones.
- Estudia combinaciones de fuentes exitosas.
- Busque retroalimentación.
- Confia en tu instinto.
¿Qué consejo tienes para hacer combinaciones de fuentes efectivas? ¡Nos encantaría que lo compartieras en la sección de comentarios a continuación! No olvides suscribirte a los comentarios para que puedas mantenerte actualizado sobre la discusión.
Imagen en miniatura del artículo de Perfect Vectors / shutterstock.com