0

Cómo combinar fuentes en tu web (y dónde encontrarlas)

Cómo combinar fuentes

 

Elegir una fuente que quede bien en tu web es tarea sencilla, ¿verdad? En cambio, si has intentado encontrar dos fuentes que funcionen bien juntas cuando las combinas, seguro que ya has sufrido algún dolor de cabeza. En este post, te explicamos cómo combinar fuentes en tus futuros proyectos.

 

Antes de empezar, ten en cuenta que no hay reglas talladas en piedra en lo que concierne a la combinación de fuentes. Sin embargo, creemos que te será útil entender las convenciones tipográficas básicas que te pueden ayudar a añadir dos o más tipografías a tu diseño sin estropearlo. ¡Vamos allá!

Cómo combinar fuentes sin estropear el diseño

Para combinar fuentes like a pro y conseguir así diseños bonitos, sencillos y eficaces, es bueno comprender algunas reglas tipográficas. Ten en cuenta que la tipografía existe desde hace muchísimo tiempo y es normal que se hayan alcanzado convenciones. Lo malo es que, al realizar una búsqueda en la red, te puedes encontrar con un millón de opiniones distintas. Por eso, en este post queremos ayudarte a aclararte las ideas.

 

Los consejos que verás a continuación no son principios científicos ni absolutos y, por descontado, todos se pueden desobedecer y crear de todas formas una combinación de fuentes estupenda.

 

1. No pierdas de vista el objetivo que persigues

Cada fuente tiene una personalidad propia: pueden ser informales, elegantes, clásicas… Al escoger una, es necesario que esa personalidad se corresponda con el objetivo de tu diseño. Por ejemplo, las fuentes redonditas y rechonchas pueden funcionar muy bien en una web pensada para niños, pero no tanto en una web corporativa.

Ten en cuenta esa personalidad también cuando combines dos fuentes. Ocurre como con las personas: a veces, el carácter de una fuente puede hacer que no se lleve bien con otra.

 

2. Escoge fuentes que se complementen entre sí

Este punto es muy relativo y dependerá del efecto que quieras conseguir. En general, cuando utilices una fuente más pesada y con una gran personalidad para un título, tendrás que encontrar una más neutra y sencilla para el resto del texto. De este modo, conseguirás un diseño equilibrado.

Se trata de crear una pareja carismática, pero sin recargar el ambiente en exceso.

 

3. Establece una jerarquía visual

Cuando decidas qué fuentes vas a utilizar, piensa en lo que quieres que el lector vea primero. ¿Cuál es la información más importante?: deberá destacar gracias a la fuente adecuada. Normalmente, el elemento textual más importante emplea siempre la fuente más pesada y de mayor tamaño.

Echa un vistazo a cualquier periódico, por ejemplo. ¿Ves cómo diferencian claramente el título, el subtítulo, la entradilla y el cuerpo de la noticia? Todo lo consiguen gracias a la jerarquía que han establecido entre sus fuentes. Además del tamaño, el peso y la negrita, el espaciado también puede ayudar al lector a entender por dónde debe empezar a leer.

 

4. Ten siempre en cuenta el contexto

En función del proyecto en el que estés trabajando (una página de tu web, un newsletter…), tendrás que decidir si quieres que el contenido destaque o si, por el contrario, prefieres una fuente que no provoque distracciones (por ejemplo, cuando tienes mucho texto en un mismo espacio).

Es decir, que tienes por delante la difícil tarea de equilibrar el diseño y escoger fuentes y parejas de fuentes que sean adecuadas para tu proyecto. Por ejemplo, si tu newsletter de este mes tiene estilo retro, las fuentes que utilices deberán ir acordes a ese contexto.

 

5. Genera contraste entre las fuentes

Si no estás muy seguro y no tienes demasiado tiempo para pensártelo, puedes utilizar el contraste que genera una fuente serif con una sans serif. Esta combinación es muy popular porque tiende a crear un efecto interesante, especialmente si los tamaños elegidos también contrastan.

Una combinación con cierto contraste te permitirá establecer una jerarquía clara y destacar la información más importante, con muy poco esfuerzo. Quedará claro lo que es el título, lo que es el subtítulo y dónde está el cuerpo del texto. Algunos elementos que puedes utilizar: estilo, tamaño, peso, forma (longitud, curvatura, dirección del movimiento…) y color.

 

6. Evita el conflicto: equilibra contraste y concordancia

El contraste es deseable, desde luego, pero el conflicto hay que evitarlo como a la peste. Para conseguirlo, deberás asegurarte de generar contraste sin renunciar a algunas similitudes entre las fuentes que hayas escogido. Puede ser el kerning, las proporciones, la altura…

Por ejemplo, la “altura de la x”, en tipografía, describe la altura de las letras minúsculas (sin tener en cuenta ascendientes y descendientes como los de la “h” o la “p”). Dos fuentes que compartan una altura de la x amplia y proporcional tendrán un aspecto harmonioso cuando se combinen, serán fácilmente legibles y seguramente funcionarán muy bien en dispositivos más pequeños.

Entonces, ¿cómo se genera ese conflicto por el que dos fuentes no funcionan bien juntas? Es posible que la proporción entre concordancia y contraste no esté bien equilibrada. Escoger dos fuentes que no tienen nada en común parecerá demasiado aleatorio, mientras que elegir dos tipografías demasiado similares confundirá al lector y no te ayudará a establecer una jerarquía visual.

Es difícil expresar la relación entre similitudes y contraste en una fórmula matemática, así que deberás confiar en tu instinto. Si no te gusta el aspecto que tienen dos fuentes cuando están juntas, es mejor que sigas buscando.

¿Es obligatorio combinar dos o más fuentes?

En absoluto. Para crear jerarquía, destacar la información más importante y crear un diseño redondo no hace falta utilizar fuentes distintas. Puedes conseguir un efecto dramático utilizando distintos colores, tamaños o las versiones estándar y en negrita de una misma fuente. Por ejemplo, puedes utilizar una fuente en los títulos y la misma, pero en cursiva, para los subtítulos.

 

Centrarte en dos fuentes de la misma familia también suele ser una apuesta segura (y te podrá ahorrar mucho tiempo en el futuro). Eso sí, asegúrate de escoger una familia que cuente con distintos pesos, estilos y tamaños. De este modo, podrás utilizar opciones variadas para crear contraste y diferenciar de forma sencilla los distintos niveles jerárquicos de tus diseños.

¿Cuántas fuentes puedo utilizar como máximo?

No hay reglas escritas: el número de fuentes que decidas emplear depende única y exclusivamente de ti. Lo que te recomendamos es que tengas en cuenta el efecto final que quieres conseguir y el tipo de personalidad que tiene cada fuente. Combinar muchas puede ser muy difícil, pero si consigues harmonía entre ellas el resultado será llamativo y muy decorativo.

 

Lo más importante es que no te compliques la vida de forma innecesaria. Si no te quieres comer la cabeza, empezar con dos fuentes es seguramente el camino más sencillo. Ocurre lo mismo que cuando utilizas demasiados colores distintos para el diseño de tu web: si combinas un gran número de fuentes corres el riesgo de confundir o irritar al visitante.

Dónde encontrar fuentes que combinen bien

En la red hemos encontrado un montón de recursos y de artículos en los que podrás inspirarte para encontrar combinaciones interesantes. Aquí tienes algunas webs estupendas:

 

TypewolfEn la sección “Sites of the Day” de Typewolf encontrarás una bonita galería de capturas de webs con combinaciones de fuentes interesantes. Además, también cuentan con un blog en el que explican los motivos por los que han elegido esas combinaciones como sus favoritas.

 

Typewolf

 

Type GeniusEn Type Genius puedes elegir la fuente principal que prefieras en el selector que te ofrecen y, a continuación, consultar las posibles combinaciones y ver cómo quedarían juntas. Un ejemplo:

 

Type Genius

 

Font PairEn Font Pair encontrarás las fuentes de Google divididas en distintas combinaciones (sans serif/serif, cursiva/sans serif, etc.) para crear diseños creativos. Echa una ojeada, escoge la categoría que más te guste y, dentro de la misma, podrás ver ejemplos muy distintos. ¡Hay un montón de posibilidades!

 

fontpair

 

Typ.ioTyp.io incluye ejemplos de combinaciones creativas. En la sección de Recomendaciones encontrarás capturas en las que inspirarte.

 

typ.io

En resumen

Aunque hemos explicado algunas convenciones y principios generales, recuerda que en lo que concierne a la combinación de fuentes no existen verdades absolutas. Seguramente no consigas aplicar todas las ideas que hemos mencionado a la vez, pero esperamos que te haya sido útil echarles un vistazo y que hayas encontrado algún concepto interesante.

 

Lo importante es que confíes siempre en tu propia creatividad y sigas tu instinto para encontrar el diseño que mejor encaje contigo.

 

¿Tienes algún otro consejo sobre cómo combinar fuentes para un proyecto web? Deja un comentario, ¡queremos conocerlo!

Andrea Barreiro

Andrea Barreiro

Andrea trabaja en Host Europe desde 2012. Es parte del equipo de marketing y supervisa la actividad en redes, el blog, actualiza la web, gestiona el email marketing y desarrolla otras iniciativas con nuestros clientes.

More Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *