Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography
Webdesign

Una guía acerca de combinar fuentes para novatos

by
Length:LongLanguages:
This post is part of a series called A-Z of Web Typography.
Getting the Hang of Hanging Punctuation
Start Using Quotation Marks the “Correct” Way

Spanish (Español) translation by Juan Flores (you can also view the original English article)

Combinar fuentes puede ser todo un reto. Escoger dos o más fuentes que queden bien juntas es complicado (seleccionar dos que combinen para conseguir tus objetivos puede crearte más de un dolor de cabeza). Vamos a intentar que esta guía sea tu aspirina y te ayude a empezar en el emparejamiento de fuentes.

Afortunadamente, la tipografía existe desde hace mucho tiempo. Para ayudarte en esta tarea tienes a tu disposición un montón de recursos, como reglas tipográficas y convenciones establecidas a lo largo de los años. El único problema es que la búsqueda en internet sólo te va a llevar a millones de opiniones contradictorias. Veamos si podemos aclarar ciertas cosas.

Aquí van los puntos que vamos a cubrir en esta guía:

  • Tu objetivo
  • ¿Cuántas fuentes debo usar?
  • ¿Comprar o no comprar?
  • ¿Cuál es la naturaleza de mi contenido?
  • ¿Cómo consigo una buena combinación?
  • Combinando 1: Concordancia
  • Combinando 2: Contraste
  • Combinando 3: Conflicto

Tu objetivo

Ten en cuenta lo básico. Cuando estamos seleccionando varias fuentes para trabajar con ellas es crucial que mantengas unidad y diversidad.

¿Cuántas fuentes debo usar?

El número de fuentes que agregues a la mezcla depende sólo de ti, pero no olvides el efecto global que estás intentando conseguir. Las fuentes, como las personas, tienen personalidad. Esta personalidad, igual que le pasa a las personas, puede chocar con otra. Piensa en tus fuentes como en los invitados de boda que tienes que situar en una mesa; una persona que anime el cotarro es suficiente, del mismo modo que muchas personas con un carácter fuerte pueden crear situaciones tensas.

Sin embargo asegúrate de que hay suficiente carisma en el grupo; ocho personas calladas con poco que decir puede provocar silencios incómodos.

Aunque ya no exista la web, la página de Fusion Ads 2011 bundle era un ejemplo perfecto de un uso existoso de fuentes.

No hay unas reglas a la hora de usar o no un número específico de fuentes en una página. Usar varias fuentes juntas puede ser difícil, conseguir armonía es todo un desafío; pero si lo logras, el resultado será notable y atractivo. Usar un número pequeño de fuentes implica una tarea más sencilla. Utiliza lo mejor de cada mundo escogiendo fuentes con diferentes estilos y grosores. De este modo puedes tomar ventaja de una gran variedad de estilos, con la certeza de que se van a complementar entre sí perfectamente.

¿Comprar o no comprar?

Hay numerosos servicios gratuítos con los que puedes sacar ventaja de la regla @font-face: google fonts, fonts.com, fontsquirrel's font kit generator, pero no descartes inmediatamente la opción de pagar por una fuente si el proyecto lo justifica. El coste de una licencia puede variar, pero tienes muchas ventajas si al final te animas a pagar.

Calidad. El cuidado y la atención que se invierte en la producción de fuentes comerciales se hace evidente en la calidad. Esto no quiere decir que los diseñadores que están detrás de las versiones gratuítas sean monos enjaulados, ni mucho menos, pero existe a menudo una diferencia cualitativa. Se hace notable sobre todo en los pequeños detalles; el grosor de la línea, las formas, los espacios blancos y el kerning o interletraje (espacio entre letras).

Compara estas dos fuentes parecidas...

Quicksand y Museo Sans Rounded

El kerning usado con Museo es superior. Sin aplicar algunos retoques, el kerning en Quicksand no es del todo perfecto (fíjate en la 'o' y en la 'i' por ejemplo), y manipular el kerning en la web no es precisamente intuitivo. Existen herramientas, kern.js por ejemplo, que te permiten realizar ajustes en cada fuente por separado, pero ajustar textos largos resulta impracticable.

"¡Vaya problema, pero si apenas se nota la diferencia!" dirás, pero como decía mi abuela, los pequeños detalles marcan la diferencia.

Originalidad. Otra ventaja es la oportunidad de destacar entre la multitud con un trabajo original. El hecho de haber pagado por tus fuentes aumenta las probabilidades de que tu diseño sea algo único.

Comunidad. Invertir algo de dinero también es una manera de ayudar en el crecimiento de la industria. Estas compañías dependen de las ventas para seguir creando fuentes. En cualquier caso, es un coste que se tiene en cuenta dentro del proyecto y que se cargará al cliente final.

¿Cuál es la naturaleza de mi contenido?

Cuando estamos seleccionando fuentes es importante tener en cuenta el tipo de diseño que queremos realizar. ¿Hablamos básicamente de un bloque de texto? ¿Hay varios títulos con subtítulos? Cuando uses varias fuentes asegúrate de que el papel de cada una de ellas está claramente definido; si estás usando una para los subtítulos, no utilices otra en otro subtítulo en otro sitio. Mantén el propósito de cada fuente claro.

Por el momento no vamos a complicar las cosas y vamos a seleccionar unas cuantas parejas de fuentes. Consideraremos las circunstancias en las que funcionan correctamente y nos preguntaremos el porqué.

¿Cómo consigo una buena combinación?

Puede que ya hayas leído esto: una buena combinación depende de la concordancia o del contraste, pero nunca del conflicto. Es decir, las fuentes seleccionadas pueden complementarse porque comparten ciertas cualidades, o porque son completamente diferentes. Sin embargo, los pares de fuentes pueden entrar en conflicto de varias maneras - siendo demasiado parecidas es sólo una de ellas.

Examinemos cada una de las posibilidades satisfactorias.

Combinando 1: Concordancia

Cuando hablamos de concordancia entre dos fuentes puede sugerirnos que ambas tienen rasgos similares. Tal vez su kerning es parecido, sus proporciones, la altura de las mayúsculas (cap height). Echa un ojo a estos ejemplos de Kerry Scott Jenkins y verás que hay similitudes claras en la proporción.

Una forma de lograr concordancia entre fuentes es emparejar dos de la misma familia. Si son familia, se tienen que llevar bien, ¿no? En cualquier caso, la familia Droid, diseñada por Steve Matteson para su uso en los dispositivos Android, dispone de varios grosores y estilos, serif y sans-serif. Tal vez no sea muy original, pero dos de esta familia funcionan muy bien juntas. Una se hará cargo de los títulos y la otra del cuerpo del texto.

Droid Serif y Droid Sans

De cualquier modo son una buena combinación.

Droid Sans y Droid Serif

Son limpias y modernas, aparte de que (como era de esperar) son muy adecuadas para la web y pequeños dispositivos debido a su altura (x-height).

x-height: Describe la altura desde la base hasta el punto más alto de las letras minúsculas, como la x. Una medida de x-height proporcionada ayuda a la lectura. Y estas dos fuentes comparten esta cualidad.

Igualmente, las fuentes del mismo diseñador a menudo comparten cualidades que ayudan a lograr armonía. Mira las proporciones sorprendentemente similares de estas dos fuentes (fíjate en la 'o')...

Cowboyslang y Supria Sans Condensed, de Hannes von Döhren

Presta atención a la calidad de las líneas de estas dos fuentes. Puede parecer que no tienen nada en común, pero dos fuentes realizadas con cariño pueden funcionar juntas mejor de lo que piensas:

Bevan y Arapey Italic

Las líneas suaves en conjunto pueden funcionar igual de bien:

Anodyne y Poulaire

Combinando 2: Contraste

Un contraste entre fuentes puede ser el motivo de una buena cominación, pero ¿cómo pueden contrastar las fuentes entre ellas? Estas son las características que deberías analizar:

  • Estilo: Echa un vistazo a cualquier página de fuentes y verás que están clasificadas por estilos: Blackletter, Monospace, Script, etc. Las fuentes de diferentes estilos suelen contrastar.
  • Tamaño: Fuente grande, fuente pequeña. Nada más que añadir.
  • Grosor: Variar el grosor es una manera común de establecer una jerarquía visual. Jerarquía lograda por contraste.
  • Forma: Considera las proporciones de la fuente. La longitud relativa del asta descendente, la curvatura, la dirección de movimiento...
  • Color: No vamos a entrar en detalles, pero el color puede determinar cuándo dos fuentes combinan bien juntas.

Para simplificar las cosas, vamos a considerar un contraste entre serif y sans-serif.

Es el típico ejemplo de combinación; escoge una serif decorativa para el título y una sobria sans-serif para el cuerpo. O escoge una sans-serif para el título (aunque no tenga sentido) y una delicada serif para el cuerpo. Una combinación ganadora en muchos casos. Vamos a echar un vistazo a combinaciones efectivas hechas con dos fuentes del sistema. Sí, incluso estas pueden funcionar bien juntas.

Georgia y Arial

¿Dónde podemos ver este tipo de combinación? Visita el boilerplate de skeleton. Despojadas de todos los estilos aplicados, Georgia y Arial se adaptan perfectamente al entorno.

Para un refinamiento mayor...

PT Serif y PT Sans

No te olvides del papel que le has asignado a cada una de las fuentes. En los casos anteriores, hemos creado una jerarquía a través del tamaño, teniendo un título mayor que el resto del texto. Hay muchas otras maneras de indicar "quién manda", el grosor es algo obvio.

Lora Bold y Istok Web

Vamos a ponernos en el supuesto de que no nos interesa una página enteramente textual. Quizás simplemente estás interesado en dos títulos y nada más (una página de "En construcción", por ejemplo). Podemos arriesgar un poco más, ya que no tenemos que lidiar con grandes dimensiones o grandes bloques de texto. ¿Qué tal quedaría un H1 bien grande reforzado con un H2?

Las fuentes condensadas son efectivas para llamar la atención, ya que ocupan un gran espacio vertical.

Bebas Neue y Alex Brush

Aquí tenemos un ejemplo de una combinación de fuentes similares que funcionan muy bien juntas:

El impresionante trabajo de Gerren Lamson y Simon Walker

Para los que estéis interados, aquí tenéis la lista de las fuentes usadas:

De nuevo cualidades completamente diferentes que, sin embargo, dejan claro el orden jerárquico de cada una.

¿Qué tal si juntamos dos sans-serif amigas? La siguiente cabecera (Conqueror) es una fuente inline diseñada expresamente para títulos o cabeceras. Con esta en mayúsculas, puede ser que necesites aumentar el espaciado un poco, como se ha hecho en el siguiente ejemplo.

Inline describe un tipo de letra con líneas blancas en el interior del propio trazo de la letra - fonts.com

Lamentablemente, no está disponible como web font (de momento) por lo que habrá que conformarse con usarla a través de píxeles...

AW Conqueror Inline y Gudea

Un buen ejemplo de fuente serif plana; máximo impacto con el mínimo esfuerzo.

Alpha Slab One y Mako

Las serifas sólidas son muy efectivas para captar la atención, pero pueden ser un poco agobiantes si se usan en exceso. El ejemplo anterior queda realmente bien con su pareja, ya que, a pesar de existir contraste, también comparten ciertos rasgos. Puede parecer que son fuentes muy diferentes, pero si examinas las curvas, verás que no difieren tanto como pensabas en un primer momento.

Hay ciertos tipos de fuentes que simplemente son tan atractivas que no fallan nunca. Buttermilk, por ejemplo; suntuosa, elaborada y decorativa. Con toda certeza va a combinar bien con casi cualquier otro tipo de letra (siempre y cuando no intentes quitarle protagonismo). En el siguiente ejemplo la combinamos con Georgia:

Buttermilk y Georgia

Y aquí con Aller, una sans-serif igual de sutil:

Buttermilk y Aller

El siguiente iba a ser mi ejemplo de choque de personalidades en una combinación. Pero ¿sabes qué? No queda nada mal. Supongo que nunca sabes qué es lo que puede funcionar...

Buttermilk y Eccentric

Combinando 3: Conflicto

No nos vamos a centrar en exceso en qué es lo que no queda bien, no queremos un montón de malas combinaciones en lo que resta de guía, ¿verdad? Simplemente os voy a mostrar cómo dos fuentes, que en principio se supone que son similares, se ven raras cuando se juntan.

Almendra y Stoke

Pero ¿por qué no quedan bien? Pensaba que la idea era contrastar al mismo tiempo que se mantiene un elemento de unidad...

Son estilos diferentes; una es Blackletter, la otra Roman serif, fíjate.

Tienen proporciones diferentes; una de ellas es compacta y relativamente alta, mientras que la otra es más amplia con astas ascendentes mayores, vuelve a mirar.

Aún así comparten tamaño y grosor, y ambas tienen esos extraños salientes (spurs) al final de cada carácter.

Precisamente ahí es donde radica el problema. Al compartir estas tres últimas características (grosor, tamaño y detalles) pasan a ser demasiado parecidas. Desempeñan papeles similares, pero las pequeñas diferencias entran en conflicto, que es lo que provoca ese efecto general tan extraño.

Las curvaturas en los spurs, por ejemplo, son completamente contrarias en cada una de ellas:

Sus ejes están desviados:

Y la forma en la que Blackletter ha sido diseñada da una ligera sensación de dirección, mientras que la Roman tiende a una posición vertical.

Estas diferencias puede que no sean un problema en otras circunstancias, pero en este caso tenemos dos fuentes que (a primera vista) parecen la misma. Es como cuando ves a un famoso al lado de su representación en cera en Madame Toussauds. Siempre va a dar una sensación extraña.

Es dificir decir con toda certeza cuándo estamos ante una buena combinación, normalmente depende del gusto de cada uno y de lo que te transmita. Cuando decidas que cierta combinación no te convence, intenta descifrar a qué se debe, esto te ayudará en el futuro a tomar decisiones más rápidamente.

Un último consejo

A día de hoy, si visitas la web de Google Fonts, encontrarás sugerencias para combinar fuentes. Tenlo en cuenta.

Conclusión

Espero que la acción de combinar fuentes se haya simplificado un poco con esta guía. Si hay una regla con la que podamos resumir todo lo que hemos comentado es la siguiente: "No sabes si va a funcionar hasta que no lo pruebas".

Sé arriesgado. Como diseñadores web tenemos a nuestra disposición cientos de fuentes disponibles para usar en nuestros proyectos. Ten claros los fundamentos básicos, y a partir de ahí, experimenta. Sin duda te vas a sorprender con lo que puedes llegar a conseguir.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.