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:

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

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.

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

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.

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

 

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?

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

 

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.

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

 

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.

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

 

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

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

2) Questrial

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

 

3) Quicksand

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

 

4) Lato

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

 

5) Nunito

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

[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

Acepto la política de privacidad

You have Successfully Subscribed!

Pin It on Pinterest

Share This