Combinación de fuentes: Cómo encontrar las combinaciones adecuadas para tus diseños web

Elegir la tipografía para tus diseños web puede resultar a menudo frustrante. Aquí tienes todo lo que necesitas saber para que emparejar fuentes sea un proceso más sencillo.

Es fácil pasarse un montón de tiempo delante de un diseño web en curso, cambiando una fuente tras otra, sin llegar nunca a conseguir el aspecto deseado.

Pero, como ocurre con muchas otras facetas del diseño, la tipografía tiene reglas que facilitan la búsqueda de la combinación tipográfica perfecta. Vamos a enseñarte lo que necesitas saber sobre la combinación de fuentes y te daremos algunas combinaciones que puedes utilizar en tu trabajo.

Consejos para combinar fuentes en su diseño web

1. Utiliza fuentes con diferentes tonos.

La escritura puede expresar emociones. Las formas de las letras que utilizamos para mostrar las palabras también influyen en nuestras percepciones. Algunos tipos de letra son severos y comerciales, mientras que otros son alegres e informales. Los tipos de letra tienen identidades distintas que pueden añadir significado a las palabras que muestran. A la hora de elegir fuentes para la web, combinar tipografías de distintos tonos añade contrastes visualmente agradables.

A la hora de elegir las mejores combinaciones tipográficas, primero hay que tener en cuenta el espíritu de quién o qué va a representar un sitio web. Un tipo de letra burbujeante puede funcionar para una empresa de juguetes, pero parecerá fuera de lugar en la web de un bufete de abogados. Por el contrario, el diseño de una web desenfadada se verá entorpecido por las serifas más serias.

Una de las consideraciones más importantes es qué tipografía se va a utilizar para los encabezados y el cuerpo del texto. Los encabezados ofrecen más libertad a la hora de utilizar tipos de letra estilizados debido a su mayor escala. Para el cuerpo del texto, se necesita una fuente que sea agradable a la vista en tamaños de texto más pequeños.

Esta plantilla creada con Webflow para una empresa ficticia de caramelos utiliza el tipo de letra Lovelace y el moderno y extravagante tipo de letra Erotique para sus encabezados. El contenido de apoyo utiliza el tipo de letra Megabyte, más convencional. Los tipos de letra tienen personalidades diferentes, pero funcionan juntos en armonía.

No tenga miedo de utilizar tipografías de tonos opuestos en sus diseños web: a veces la yuxtaposición puede hacer que su contenido destaque.

2. 2. Crear contraste -pero no demasiado- con las parejas tipográficas.

Por ejemplo, no utilice un tipo de letra sin gracias en un encabezado que sea sorprendentemente similar a otro sin gracias que esté utilizando en el cuerpo del texto. Hay que combinar tipos de letra visualmente diferentes pero que se complementen.

¿Qué ocurre si tomamos un tipo de letra con florituras caligráficas como Great Vibes y lo combinamos con un serif como Merriweather? Acabamos con una sensación de contraste poco agradable a la vista.

Las florituras y los bucles de Great Vibes son suaves y sofisticados, mientras que Merriweather es un tipo de letra sencillo, con una formalidad transmitida por sus formas con gracias. Aquí, el contraste es demasiado grande para que la combinación funcione.

Cambiemos a una combinación tipográfica más satisfactoria. En la cabecera utilizamos Vollkorn, una fuente con gracias sutilmente divertida. La hemos combinado con Open Sans, una fuente sin gracias más neutra y sencilla. Esta combinación funciona bien porque, aunque hay contraste, la sutileza de ambos tipos de letra los hace visualmente complementarios.

3. Limite los tipos de letra a tres o menos.

En la mayoría de los diseños, utilizará un tipo de letra web para el titular y otro para el cuerpo. También puede haber lugares en el diseño en los que utilices letras a mano o tipografía más estilizada con fines decorativos. Por muy tentados que nos sintamos por todas las fuentes gratuitas que hay, no necesitamos más de tres tipos de letra para un solo sitio web.

Muchos diseñadores optan por utilizar una superfamilia tipográfica para su trabajo. Una superfamilia es un grupo de tipos de letra relacionados entre sí. Puede contener variaciones estilísticas como cursiva, pesos ligeros o pesados, versiones serif y sans serif, así como otras variaciones. Lo mejor de las superfamilias es que eliminan las conjeturas a la hora de encontrar fuentes complementarias, porque se han diseñado pensando en la compatibilidad.

Las superfamilias permiten utilizar un mismo tipo de letra de múltiples maneras. Eche un vistazo a estas selecciones de la superfamilia Roboto. Hay una gran diferencia entre la sutileza de Thin 100 Italic y la fuerte declaración de Regular 400.

Las superfamilias tipográficas le ofrecen muchas opciones de fuentes con las que jugar sin dejar de ceñirse a un único estilo tipográfico.

4. Comunicar la jerarquía visual mediante el emparejamiento de fuentes.

The Equitist, un sitio web de atención sanitaria creado con Webflow, comunica su jerarquía a través de diferentes estilos tipográficos, tamaños y colores.

Puede utilizar la tipografía para enviar señales visuales sobre la importancia de las distintas secciones de contenido. Los titulares deben tener la mayor fuerza visual, seguidos de los subtítulos y, por último, el cuerpo del texto. Utilice sus combinaciones de fuentes para dar a su contenido un sentido obvio de estructura.

Utilizar el tamaño de letra para dar a entender el orden.

Esto es fácil. El tipo de letra más grande representa lo que tiene prioridad, con tamaños descendentes que representan la jerarquía del contenido. El uso de mayúsculas también ayuda a destacar elementos importantes, como las llamadas a la acción. Pero hay que usar las mayúsculas con moderación: nadie quiere tener la sensación de que un sitio web le está gritando.

La mayoría de los diseñadores principiantes recurren a la integración de diferentes tamaños de tipografía, pero hay otras formas de indicar la jerarquía visual.

Experimente con diferentes pesos.

Construido con Webflow, este sitio web para la agencia Babel mezcla cosas con pesos tipográficos más ligeros y más pesados.

Los pesos más elevados indican importancia, mientras que los más ligeros representan un peldaño inferior en la jerarquía del contenido. Se puede hacer mucho con un solo tipo de letra variando su peso, como vimos con la superfamilia Roboto.

Variar los colores de las fuentes.

Aunque no es conveniente llenar el diseño con un caleidoscopio de tonos contradictorios, variar las tonalidades del texto puede ayudar a que ciertas palabras destaquen. Las variaciones más claras y más oscuras crean una agradable sensación de contraste, y los tonos más oscuros indican que el texto debe leerse en primer lugar. Cuando experimentes con los colores de las fuentes, asegúrate de que no se pierdan en el fondo.

Tipos de letra que hay que tener en cuenta a la hora de combinarlos.

Ahora que ya hemos cubierto los principios tipográficos que debe tener en cuenta, echemos un vistazo a las principales categorías de tipos de letra y a algunas combinaciones que puede utilizar en su trabajo de diseño.

Serifs.

Los tipos de letra con gracias se desarrollaron para facilitar la lectura impresa y se remontan a finales del siglo XVIII.

Una serifa es una pequeña línea o trazo que se añade a una letra. Las gracias proporcionan señales visuales que facilitan la lectura. Los tipos de letra con gracias hacen más eficaz el escaneado de texto, sobre todo cuando se trata de grandes volúmenes, como las páginas de los libros.

En los primeros tiempos de la informática, las resoluciones primitivas de los monitores no se adaptaban bien a los tipos de letra con gracias. Pero los monitores actuales de alta resolución ofrecen a los diseñadores gráficos una gran variedad de fuentes con gracias con las que pueden trabajar.

Cuando utilice una fuente con gracias, combínela siempre con una fuente sin gracias. Las fuentes con gracias suelen ser demasiado parecidas, lo que dificulta su combinación.

Las gracias ofrecen mucha flexibilidad. Son fáciles de leer en tamaños pequeños y grandes, por lo que resultan ideales tanto para el cuerpo del texto como para los encabezados.

Idea para emparejar fuentes: EB Garamond y Montserrat.

Aquí hemos tomado la serif EB Garamond a un tamaño más pequeño en el cuerpo del texto y la hemos combinado con Montserrat a mayor escala en el titular. Las fuentes con serifa funcionan mejor para grandes fragmentos de texto cuando están en un tamaño de fuente más pequeño.

Idea de emparejamiento de fuentes: Libre Baskerville y Raleway

Las gracias más pronunciadas y la angulosidad de Libre Baskerville contrastan con el fino trazo de Raleway.

Sin gracias

Esto es bastante sencillo: las san serifas carecen de las líneas adicionales que adornan a las serifas. Las sin gracias pueden utilizarse a menor escala para párrafos o cuerpo de texto, o combinarse con una serifa en los encabezados.

Idea para emparejar fuentes: Open Sans y Lato

Puede que algunos diseñadores se burlen de fuentes como Open Sans y Helvetica por su uso excesivo, pero son populares por una razón. Open Sans es una fuente sencilla pero acogedora, lo que significa que combina bien con muchas otras fuentes. Es como un helado de vainilla: una base sólida sobre la que construir.

Aquí usamos Open Sans en la cabecera y Lato en el cuerpo del texto, otro tipo de letra sin gracias.

Fuentes de pantalla

Las fuentes de pantalla funcionan bien cuando hay que llamar la atención. Suelen tener formas sofisticadas que van de lo grande y atrevido a lo escaso y fino. Estas fuentes ofrecen un grado de estilización que las hace ideales para titulares y otras partes del diseño en las que hay que causar una gran impresión con poco texto.

Idea de emparejamiento de fuentes: Bubblegum Sans y Open Sans

Bubblegum Sans tiene letras alegres y estilizadas que combinan a la perfección con la neutralidad de Open Sans.

También te puede interesar:  15 mejores fuentes futuristas para diseñadores.

Idea de emparejamiento de fuentes: Poiret One y Lato

Las letras matizadas de Poiret One, inspiradas en el art déco, y sus finas líneas la convierten en una fuente moderna excelente si lo que busca es un poco de sofisticación. Combinar este tipo de letra con otro más sutil, como Lato, crea una sensación de contraste que funciona bien en conjunto.

Tipos de letra monoespaciados

Todos los caracteres de un tipo monoespaciado tienen la misma anchura. Esta medida horizontal fija las distingue de los tipos de letra de anchura variable y les confiere una gran coherencia. En los primeros tiempos de la informática, los tipos monoespaciados se utilizaban mucho por su sencillez y su capacidad para verse bien en las primeras pantallas de baja resolución.

Idea de combinación de fuentes: IBM Plex Mono y PT Sans

Diseñada como homenaje a IBM, IBM Plex Mono es un tipo de letra moderno con una identidad visual perfecta para las nuevas empresas y otros sectores tecnológicos. Combinar este tipo de letra monoespaciado con PT Sans, que tiene una geometría más definida, crea una agradable sensación de contraste y jerarquía visual.

Idea de emparejamiento de fuentes: Roboto Mono y Roboto

Nos encanta Roboto por su alto grado de legibilidad. Esta combinación de fuentes, que combina Roboto Mono con la versión estándar, es agradable a la vista.

La tipografía es esencial para el diseño web

El diseño web eficaz tiene muchos aspectos. Enfoca tus combinaciones tipográficas con el mismo nivel de consideración que aplicas a la elección de una paleta de colores. El tono de los tipos de letra que elijas, la forma en que los estilices y su legibilidad son una parte importante de la experiencia del usuario con un diseño web. Encuentra fuentes atractivas que reflejen la personalidad de lo que estás creando y ofrece a tus visitantes la mejor forma posible de experimentar su contenido.

Este artículo ha sido publicado originalmente en “webflow.com”. Puedes leer el artículo original aquí.