¿Qué tipos de letras debes usar en tu web?

Los tipos de letras en una página web son fundamentales, no sólo para que se lea de forma cómoda, sino para darle el toque personal que siempre buscamos. Pero, ¿qué tipos de letras y cuántos debes usar en tu web?

Antes de empezar, y por si no estás habituado a la nomenclatura, a los tipos de letras nos referimos a menudo como fuentes.

¿Dónde se usan los tipos de letras en una página web?

• Cuerpo. Es la zona de los textos de las entradas, páginas, y en general la mayor parte de información de nuestra web.
• Títulos. De entradas, páginas, secciones, anuncios, etc.
• Menús.
• Logo y nombre de la web.

Los anteriores son los elementos más frecuentes donde podemos «jugar» con las fuentes. Pero además, podemos usar fuentes en los widgets (zonas de información de la barra lateral, el pie…), textos de la home (página inicial al entrar en tu web), textos de botones, etc.

Tipos de fuentes según Google Fonts

Google Fonts es un repositorio de fuentes que puedes usar en tu web. Google las clasifica en:

Serif

Las gracias o serifas son pequeños adornos situados generalmente en los extremos de las líneas de los caracteres tipográficos.

Ejemplos de fuentes serif

Sans serif

Como el propio nombre indica (en francés) las fuentes sans serif son las que no tienen serifa, mostrando trazos más sobrios y rectos.

Ejemplos de fuentes sans serif

Las fuentes serif y sans serif son muy legibles (unas más que otras) y tienen un uso muy generalizado, tanto el cuerpo como en el resto de zonas de la web. Yo, en general, prefiero usar las sans serif en el cuerpo de la web, por su sencillez y trazo directo. Para mí son más cómodas de leer.

Handwriting

Como te puedes imaginar por el nombre, estas fuentes simulan una escritura manual.

Ejemplos de fuentes handwriting

Este tipo de fuentes se pueden usar, por ejemplo, en blogs de literatura, bien en el cuerpo o en los títulos de las entradas.

Monospace

La característica principal de estas tipografías es que todos sus caracteres ocupan el mismo espacio.

Ejemplos de fuentes monospace

Una web de carácter vintage podría usar esta tipografía.

Display

Las fuentes display están especialmente diseñadas para usarlas en tamaños grandes, como carteles, grandes títulares, rótulos, etc. Suelen tener trazos gruesos, de mucho atractivo e impacto para el lector.

Ejemplos de fuentes display

Una web de perfil creativo, como una agencia de diseño gráfico, decoración, etc., podría usar esta tipografía.

Hasta aquí un poco de teoría.

¿Cómo se pueden combinar las fuentes en una web? Ejemplos

Primero, dos consejos iniciales:

• Aplica el sentido común y sé práctico. Un tipo de letra poco legible, de tamaño pequeño, con poco interlineado, que no contraste bien con el fondo… espantará a tus potenciales clientes y lectores en general.
• Como los colores, no uses tropecientas fuentes. Como máximo tres está bien. Una para el cuerpo, otra para títulos, y si quieres otra para menús o botones. Pero no más.

¿Qué tipos de fuentes debo combinar? Depende de la temática de tu web, de lo que quieras transmitir, de tu instinto. Pero una primera combinación básica es usar una fuente sans serif para el cuerpo con una serif en otras zonas de la web.

Veamos algunos ejemplos de proyectos que hemos desarrollado en tentuRed.

En septimamenor hemos usado la elegante fuente sans serif «Open Sans» en el cuerpo junto a la discreta serif «Taviraj» en los títulos. La integración de fuentes es muy fluida.
En el logo y lema usamos una fuente de pago, la display «Emblema» de Creative Market. Las fuentes de Google Fonts son gratuitas, pero a veces puede merecer la pena pagar por tener un diseño más exclusivo.

En nuestra web tentuRed sólo hay una fuente, la súperlegible «Ek Mukta», sans serif 100%. No quisimos combinar otra fuente para dar importancia al contenido.

RasaPoeta es otro cantar. Es una web muy sensible; su contenido son poemas. Adivina qué tipo de fuente elegimos 😉 Así es, una handwriting. La «Bad Script» encaja perfectamente con los poemas de este blog; le imprime un carácter personal en cada entrada. La otra fuente principal usada para el resto de textos es «Georgia», una amable serif.

Interlineado

Otra cuestión muy importante para tener una buena legibilidad es el interlineado, que mide la altura de la línea de texto. Fíjate en el siguiente ejemplo:

Creo que queda bastante claro qué párrafo es más legible según su interlineado, ¿no?

Para terminar, y como siempre, apelo a tu participación. ¿Sabes qué fuentes usas en tu web? ¿O cuáles te gustaría usar? 😉