Tipografías para web: herramientas + consejos para combinarlas como un profesional

En uno de mis últimos posts hablaba de las tipografías para web como una de las tendencias en diseño web para 2018, en concreto mencionaba las de estilo handmade.

Como soy un poco freak con las tipografías (me encantan, tengo más de mil instaladas en mi ordenador), quiero hablar con más detalle sobre ellas en este post.

¿Qué vas a encontrar en este artículo?

Si te interesa el tema de las tipografías para web, te voy a dar unos consejos para elegirlas correctamente, algunas herramientas y plugins para instalarlas en WordPress, y también te diré cuáles son mis preferidas.

¡Empezamos!

Consejos a la hora de elegir tipografías para web

El primer punto importante a la hora de hablar de tipografías para web es su correcta elección.

Lo cierto es que existen cientos de tipografías que puedes utilizar en tu sitio web, pero el éxito reside en la capacidad de elegirlas y combinarlas con acierto.

En mi opinión, escoger una buena combinación de tipografías para una web no es tarea sencilla, pues requiere de hacer diferentes pruebas hasta encontrar la mezcla perfecta.

¿Qué te recomiendo para elegir las tipografías de tu web y no morir en el intento?

1. No abuses de tipografías diferentes en tu web. Escoge como máximo dos o tres diferentes y busca una combinación atractiva.
2. Las tipografías tienen una personalidad propia que es la que tienes impregnar en tu marca. Por eso debes elegirlas correctamente y en función de los valores que quieras transmitir.
3. Busca una buena combinación de tipografías (en mi caso suelo utilizar dos diferentes): una para el cuerpo de texto de entradas y páginas, y otra para los titulares, botones, subtítulos, es decir, las partes donde el texto es más llamativo y hay menos cantidad.

Aquí puedes ver la combinación de dos tipografías que he usado en mi web:

Como puedes ver, utilizo una combinación de dos tipografías:

1. Montserrat para los textos destacados, titulares, llamadas a la acción, etc.
2. Nunito para el cuerpo de texto.

Herramientas con las que crear combinaciones de tipografías para web

A la hora de buscar combinaciones molonas para las tipografías de tu web puedes utilizar diferentes opciones.

He recopilado algunas de ellas y te las quiero explicar con más detalles:

1) Tipografías de la plantilla

Antes de utilizar alguna herramienta externa, te recomiendo echar un vistazo a las tipografías que trae por defecto tu plantilla de WordPress.

En ese sentido, es mejor utilizar las tipografías del tema que tengas instalado en tu web antes de recurrir a la instalación de plugins.

Hoy en día, la mayoría de plantillas, especialmente las premium, disponen de un interesante catálogo de tipografías web que vienen por defecto.

En mi caso, la plantilla que utilizo es Divi, la cual incorpora una gran variedad de fuentes que se pueden combinar en la cabecera y el cuerpo de texto.

En definitiva, antes de recurrir a otras opciones, revisa las que trae instaladas tu tema y haz una combinación chula.

2) Google Fonts

Google Fonts es un directorio de Google donde están alojadas todas las tipografías disponibles para los diferentes navegadores (especialmente para Chrome).

Estas fuentes tienen licencia abierta y están preparadas tanto para su uso en diseño web como para su descarga.

Las tipografías están categorizados por tipos, lo que hace más sencilla su búsqueda:

• Serif
• Sans Serif
• Display
• Handwriting
• Monospace

Además, la plataforma permite filtrar las tipografías en función de otros aspectos como su diseño, ancho o estilo.

3) Find great Google Fonts Tool

Si utilizas habitualmente las Google Fonts, esta herramienta te va a gustar mucho.

Find great Google Fonts recopila las Google Fonts, pero va un paso más allá, pues aquí las fuentes están categorizadas visualmente.

Las categorías visuales son más exactas que la propia terminología. Por ejemplo, las denominaciones "serif" y "sans-serif" a veces pueden resultar ambiguas, pues muchas tipografías combinan las características visuales de los dos estilos.

Find great Google Fonts te permite filtrar la lista de tipografías para web con los botones que aparecen en la izquierda.

Además, puedes obtener más información de cada fuente clicando en cada una de ellas.

Muy útil, ¿verdad?

4) Plugins para WordPress

Por último, quiero mencionar un par de plugins para gestionar tipografías web que uso cuando no maqueto con Divi y necesito fuentes adicionales a las que trae la plantilla.

4.1) WP Google Fonts

El plugin WP Google Font te permite agregar fuentes de alta calidad a tu WordPress.

Este plugin no solo agrega el código de Google necesario, sino que también te permite asignar las fuentes a elementos CSS específicos de tu web desde el administrador de WordPress.

O, si prefieres, puedes añadir las fuentes desde la hoja de estilo de tu propio tema (archivo style.css).

Lo que más me gusta de este plugin es que puedes añadir diferentes tipografías en tu web en función del formato: títulos (h1, h2, h3, h4, h5 y h6), cuerpo de texto, listados o citas.

4.2) Easy Google Fonts

El plugin Easy Google Fonts permite añadir fuentes de Google personalizadas a cualquier tema de WordPress sin codificación, de manera muy sencilla.

Este plugin se integra con el personalizador plantillas de WordPress para que tengas una vista previa de cómo quedan las diferentes fuentes de Google en tu web.

Además, permite crear controles específicos de tipografías de forma personalizada para controlar selectores de CSS específicos.

Una vez creados, estos controles están disponibles de forma instantánea en el personalizador sin necesidad de codificación.

Mis tipografías favoritas para diseño web

Para terminar, he querido recopilar cuáles son mis tipografías para web favoritas, tanto por su diseño como por sus resultados.

He probado un montón de fuentes diferentes y estas son las que mejores resultados me dan a nivel visual:

1) Raleway

2) Questrial

3) Quicksand

4) Lato

5) Nunito

[Imágenes extraídas de 1001fonts.com]

Hasta aquí mis consejos, herramientas y plugins para elijas correctamente las tipografías de tu web y que puedas crear combinaciones atractivas y con personalidad.

IMG: shutterstock