Encuentra el emparejamiento perfecto de Google Font para tu sitio web

Las fuentes de Google ofrecen toda una biblioteca de fuentes freweb para elegir. Genial! Pero, ¿qué sucede cuando te desplazas por esa lista de 650 opciones? Los ojos se esfuman, las fuentes empiezan a mezclarse y puedes elegir una fuente que empiece por “A” para no tener que seguir desplazándote (quizá por eso Arial se hizo tan popular…)

Pero no tiene por qué ser así. Elegir las fuentes puede ser divertido en lugar de abrumador. Este consejo de Jimdo repasará algunas de las ideas básicas que hay detrás de las combinaciones de fuentes exitosas, y también proporcionará una lista de recursos donde podrás encontrar los emparejamientos de fuentes de Google que te gusten.

¿Cuántas fuentes diferentes necesita su sitio web?

Normalmente recomendamos elegir 2-3 fuentes:

Texto del cuerpo/párrafo

No puedes fallar con una fuente sin serifa aquí que es muy fácil de leer, especialmente en tamaños más pequeños. Evita las fuentes en cursiva o en mayúsculas, que son difíciles de leer en más de unas pocas palabras.

Encabezamientos

Aquí puedes usar algo más decorativo o divertido, porque sólo lo usarás para textos cortos. También podrías usar una fuente de letras mayúsculas. Elegir una fuente única aquí puede ayudar a añadir un poco de estilo al diseño de tu sitio web.

Menús de navegación

Puedes repetir una de tus dos primeras fuentes aquí, o elegir una tercera fuente complementaria. Recuerda que los menús de navegación deben ser fáciles de leer, por lo que te recomendamos que evites las fuentes cursivas o demasiado estilizadas. Al igual que con los encabezados, puedes usar una fuente de letras mayúsculas aquí.

Para más información sobre la diferencia entre fuentes serif, sans-serif y decorativas (y recomendaciones para todas ellas), consulta el artículo “Guía de fuentes web de Google”.

¿No puedes usar la misma fuente en todas partes?

Tú puedes. En última instancia, no hay nada malo con un sitio web simple y mínimo, y puedes diferenciar tus encabezados y el texto del cuerpo usando diferentes tamaños y colores.

Dicho esto, el uso de 2-3 fuentes diferentes es una buena manera de añadir algo de personalidad e interés visual a tu sitio. Diferentes fuentes ayudan a desarrollar un sentido de consistencia y jerarquía a través de sus páginas web. Al igual que los carteles de las calles, las diferentes fuentes utilizadas de forma consistente actuarán como señales para sus usuarios, para que puedan escanear rápidamente una página y saber qué tipo de información están mirando.

Sólo recuerda que esa variación no significa un “arco iris de fuentes”. Usar demasiados tipos de letra será como tener demasiadas señales de calle en una intersección: abrumador y confuso.

Entonces, ¿cómo se eligen las fuentes que van juntas?

Cuando emparejas fuentes, intentas introducir tanto la unidad como la variedad . En otras palabras, no quieres que las fuentes sean tan parecidas que se parezcan demasiado (con lo que se anula el propósito de usar fuentes diferentes). Tampoco quieres que sean tan completamente diferentes que choquen o parezcan venir de mundos completamente distintos.

Algunas técnicas diferentes de emparejamiento incluyen:

Contraste

Si eliges una fuente decorativa muy fuerte para tus encabezados, podrías equilibrarla con una fuente simple sin seriedad que no compita por la atención.

Personalidad

Las fuentes pueden ser modernas, atrevidas, suaves, sofisticadas, juguetonas; y estas “personalidades” de las fuentes deben reflejar la personalidad de su marca. Si desea, digamos, un aspecto más femenino para su sitio web, puede elegir dos fuentes que compartan esa personalidad, aunque se vean diferentes.

Período de tiempo


Si quieres evocar un determinado período de tiempo, puedes elegir dos fuentes retro o dos fuentes más de estilo antiguo.

Concordancia


Es un poco más difícil de detectar que el contraste, pero proporciones similares o formas de letras similares pueden ayudar a que dos fuentes vayan juntas. Las fuentes de la misma familia (como Roboto y Roboto Slab) compartirán rasgos similares.

En general, asegúrate de encontrar un buen equilibrio. Como dice Ian Yates de Tuts+, “Piensa en tus fuentes como invitados de mesa en una recepción de boda; un animador suele ser suficiente ya que demasiadas personalidades fuertes pueden hacer que el ambiente sea incómodo”.

Prefiero ir con algo probado y verdadero. ¿Hay sitios que sugieren buenas combinaciones de fuentes?


Ya lo creo. Hay algunos sitios que deberías visitar y que recomiendan ciertas combinaciones de fuentes de Google y te muestran exactamente cómo se ven. Si no te apetece reinventar la rueda, elige una de sus combinaciones y ¡corre con ella!

Directorio de fuentes web de Google

Junto con un bonito filtro y ejemplos, el directorio de Google también ofrece sugerencias de emparejamiento en la pestaña “Emparejamientos”. Si ya conoces una fuente que te guste (en este ejemplo usaremos Pacifico), búscala en el directorio de esta manera.

Fontpair

Esta útil página web tiene una lista bastante buena de recomendaciones de pares de fuentes, ordenadas por tipo (por ejemplo, Serif/sans-serif, Cursive-serif). Mejor aún, puedes escribir tu texto directamente en su sitio web para ver cómo se ve con cada combinación de fuentes.

Iniciativa 25×52

Este proyecto en curso ofrece una hermosa inspiración de fuentes con pasajes de las Fábulas de Esopo en diferentes combinaciones de fuentes de Google. Es divertido desplazarse aunque no estés buscando nuevas fuentes.

Tipo.io

Type.io es como un museo de hermosos sitios web curados de toda la web, con información sobre las fuentes utilizadas en cada uno. Puedes ordenar su biblioteca para que sólo te muestre ejemplos de fuentes web de Google.

FontsinUse

Similar a type.io, Fonts in Use es una colección de sitios web ordenados por fuente. Es una buena opción si ya tienes una fuente en mente y quieres tener ideas de formas creativas de usarla o emparejarla.

TipoConexión

¿Quieres divertirte un poco más con esto? Type Connection configura la búsqueda de fuentes como un juego de citas, para que puedas practicar la selección de buenas parejas.

Encontrar fuentes en la naturaleza

FontFaceNinja
¿Qué pasa si te encuentras con un sitio web que usa fuentes que te encantan? Bueno, estás de suerte, porque es fácil mirar bajo el capó y ver qué fuentes están usando.

Tanto Chrome como Firefox ofrecen plugins que te dirán las fuentes exactas que estás viendo. WhatFont y Fontface Ninja son ambas grandes opciones.

Conclusión

Un último consejo: sólo porque exista una fuente “web” de Google no significa que sea adecuada para un sitio web. Desplácese hacia abajo en la lista y verá un montón de fuentes que son difíciles de imaginar en el uso real. Si sospechas que una fuente puede ser demasiado difícil de leer, probablemente lo sea.

También recuerda no preocuparte demasiado por esto. Como en la vida real, no hay un emparejamiento “perfecto”. Si encuentras una combinación de fuentes que te guste, y es legible, ¡vete con ella y diviértete!

Este artículo fue escrito originalmente para Jimdo por Maggie Biroscak. Con una interfaz simple e intuitiva, Jimdo permite a cualquiera crear un sitio web único con un blog y una tienda en línea.

admin

Deja una respuesta

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

Publicar un comentario