Cómo elegir la tipografía correcta para tu página web.

La tipografía que eliges es lo primero a lo que reacciona un visitante y lo último en lo que piensa la mayoría de quienes dirigen un negocio. Marca el tono antes de que se lea una palabra, y como el texto es la mayor parte de un sitio web, esa elección toca más del sitio que cualquier otra decisión de diseño.

Esta guía cubre los distintos tipos de tipografía para una página web, cómo elegir fuentes que encajen con tu marca, cómo combinar tipografías, cuántas usar, y las mejores tipografías para páginas web cuando quieres algo seguro y bueno. Está escrita para quien está diseñando su propio sitio o para quien le da el brief a alguien más, y los consejos aplican en los dos casos.

Fuente, tipografía y familia: las palabras que necesitas

Tres términos se usan como si fueran lo mismo, aunque en el uso diario casi todos dicen simplemente "tipo de letra". Tenerlos claros hace más corta cualquier conversación con un diseñador.

• Una tipografía es el diseño en sí: Helvetica, Georgia, Times New Roman.
• Una fuente es una instancia de esa tipografía: Georgia Bold en 16 píxeles.
• Una familia tipográfica es el conjunto completo de pesos y estilos de una tipografía.

En la práctica la mayoría dice "fuente" para las tres cosas, y a nadie le importa. Lo que importa es que al elegir una tipografía estás eligiendo un sistema completo, y una familia con solo dos pesos se te va a quedar corta apenas construyas un sitio real.

Los distintos tipos de tipografía para páginas web

Seis categorías de tipo de letra cubren casi todo.

Serif. Trazos pequeños en las puntas de las letras. Una tipografía serif se lee como establecida, editorial y confiable, por lo que los estudios legales y los periódicos se apoyan en ella. Cualquier fuente serif como Georgia, Merriweather y Garamond funciona bien para el cuerpo del texto.

Sans serif. Sin trazos, formas más limpias. Una fuente sans serif es la opción por defecto para interfaces porque se mantiene legible en tamaños pequeños y es fácil de leer en cualquier pantalla. Helvetica, Arial, Roboto, Open Sans y Lato son las opciones más populares.

Slab serif. Trazos rectangulares pesados. Fuerte en titulares, casi nunca cómoda en cuerpo de texto.

Script y cursiva. Letra manuscrita. Una fuente script es hermosa en un logotipo y agotadora en un párrafo. Usa una como máximo, y nunca para algo que un visitante tenga que leer rápido.

Display y decorativas. Construidas para tamaños grandes y personalidad. Una fuente display es excelente a 72 píxeles e inusable a 16.

Monoespaciada. Cada carácter con el mismo ancho. Correcta para código y datos, deliberada en cualquier otro lugar.

La vieja regla de usar serif en papel y sans serif en pantalla venía de pantallas de baja resolución y ya no aplica. Una tipografía serif bien hecha se lee perfectamente en una pantalla moderna, así que elige por el tono, no por esa regla.

Elegir la tipografía correcta para tu sitio web

Seis factores deciden qué tipo de fuente es la correcta, más o menos en este orden.

1. Parte de la marca

Al diseñar y al planear cómo vas a diseñar el resto, la tipografía debería decir lo que dice tu identidad de marca. Un negocio técnico y preciso y uno cálido y personal necesitan letras distintas, y la fuente que elijas hace ese trabajo aunque no lo hayas planeado.

Antes de diseñar nada, escribe tres adjetivos para la marca antes de mirar una sola muestra. Elegir la tipografía correcta es mucho más fácil cuando puedes descartar otra fuente por una razón y no por una sensación.

2. Prioriza la legibilidad

La legibilidad de las letras es qué tan fácil se distingue cada carácter. La legibilidad de lectura es qué tan cómodo es leer un bloque de texto. Necesitas las dos, y un sitio web necesita más la segunda.

Para mejorar la legibilidad, busca una altura de x grande, formas de letra abiertas, y una distinción clara entre caracteres parecidos. Un tipo de letra difícil de leer suele fallar aquí primero: una I mayúscula, una l minúscula y el número 1 no deberían verse idénticos. Prueba cualquier candidata en tamaños pequeños antes de decidirte, porque muchas tipografías que se ven excelentes a 48 píxeles se caen a 14.

3. Revisa la familia

Una fuente versátil te da como mínimo regular, medium, negrita e itálica. Menos pesos de fuente significa menos jerarquía, lo que significa más trabajo en todo lo demás. Si piensas construir algo más que un sitio de una sola pantalla, esto importa más que las formas.

4. Considera el rendimiento

Cada peso adicional es un archivo de fuente que el navegador descarga. Dos familias con tres pesos cada una está bien; cinco familias con nueve pesos cada una van a hacer que el sitio cargue lo bastante lento como para importar. Alojar las fuentes tú mismo y recortarlas reduce el costo.

5. Confirma la licencia

Una biblioteca de fuentes como Google Fonts es gratis para uso comercial. Adobe Fonts viene con una suscripción. Una tipografía comprada directo a una fundición tiene términos que vale la pena leer, en especial sobre el uso web y las vistas de sitio.

6. Pruébala con tu contenido real

Pon tu encabezado real, tu párrafo real, los nombres reales de tus servicios en el tamaño de fuente que de verdad vas a usar. El texto de relleno esconde cada problema que tus palabras reales van a crear, sobre todo las largas.

¿Cuántas tipografías deberías usar?

Dos. Elige fuentes para dos roles: una para encabezados y una para el cuerpo del texto. Una sola fuente bien usada en los dos también es una respuesta perfectamente buena.

Esa es la respuesta práctica, y se acerca a la regla de las tres fuentes, muy repetida, que dice que nunca se deben usar más de tres tipografías en un mismo diseño. Trata el tres como el techo y el dos como la meta. Una tercera se justifica cuando hace un trabajo muy específico, como un estilo de cita o una pantalla numérica.

Usar muchas fuentes en un solo sitio es la señal amateur más común al diseñar, porque cada tipografía adicional tiene que justificarse contra la coherencia que le cuesta al sitio. Además, ciertas fuentes simplemente se niegan a convivir, y ninguna cantidad de espaciado lo arregla.

Cómo combinar tipografías

Combinar fuentes tiene dos estrategias que funcionan.

Contraste. Combina una serif con una sans serif para que la diferencia sea obvia. Un titular serif sobre cuerpo sans, o al revés, las dos funcionan. La combinación falla cuando las dos se parecen pero no son iguales, lo que se lee como un error.

Una sola familia. Usa una tipografía con un rango amplio y crea jerarquía solo con peso, tamaño y espaciado. Es la ruta más segura hacia una combinación de fuentes perfecta, porque no hay nada que choque.

Tres reglas prácticas para cualquier combinación:

1. Iguala las alturas de x aproximadamente, o las dos se van a ver desparejas al mismo tamaño.
2. Dale a la fuente principal los encabezados y a la secundaria el cuerpo, y mantén esa asignación en todas partes.
3. Dilo en voz alta: si no puedes explicar por qué estas dos van juntas, probablemente no van.

Combinaciones confiables para empezar: Playfair Display con Source Sans, Merriweather con Open Sans, Lora con Lato, o Inter usada sola en todo el sitio.

Las mejores tipografías para sitios web

No existe una única mejor tipografía, solo fuentes que sirven a un propósito. Estas son opciones confiables.

Para cuerpo de texto. Inter, Open Sans, Source Sans, Lato y Roboto entre las sans serif. Georgia, Merriweather y Lora entre las serif. Todas son legibles en tamaños pequeños y están disponibles en Google Fonts.

Para encabezados. Playfair Display y Libre Baskerville para algo editorial. Poppins y Montserrat para algo moderno y geométrico. Una tipografía serif aquí con un cuerpo sans es una combinación confiable.

Fuentes seguras para web. Arial, Helvetica, Georgia, Times New Roman y Verdana están instaladas casi en todas partes y no necesitan descarga. No están de moda y nunca fallan, que es exactamente lo que quieres en una pila de respaldo.

Una tipografía a medida. Vale la pena cuando la marca de verdad necesita ser distintiva y tienes el presupuesto para licenciarla. No vale la pena como primer movimiento.

La tipografía más atractiva para un sitio web es la que nadie nota, porque el lector estaba ocupado leyendo. Una fuente funciona mejor cuando desaparece, y las fuentes que llaman la atención en el cuerpo del texto están trabajando en tu contra.

Buenas prácticas al elegir tipografía

• Define primero el cuerpo del texto. Todo lo demás es relativo a él. Un tamaño de fuente de 16 píxeles es el mínimo en la web, y 18 suele ser mejor para textos largos.
• Construye una escala tipográfica. Cuatro o cinco tamaños definidos una vez, usados en todas partes. Esto es lo que hace que un sitio grande se sienta coherente.
• Dale espacio al texto. Una altura de línea de alrededor de 1.5 para párrafos, y entre 45 y 75 caracteres por línea. El espaciado hace tanto por la lectura como la tipografía misma.
• Mantén el contraste alto. Un texto gris claro sobre blanco se ve refinado en una herramienta de diseño y falla en una pantalla real a plena luz del día, y daña la experiencia de quien lee al aire libre.
• Limita los estilos de fuente. Dos pesos y una itálica van a sostener la mayoría de los sitios. Cada estilo adicional es una decisión que vas a tener que seguir tomando.
• Define una pila de respaldo. Si tu fuente web no carga, el sitio debería seguir viéndose intencional en vez de caer en Times New Roman por defecto.
• Revísala en un teléfono. Ahí está la mayoría de tus visitantes, y los tamaños pequeños son donde una tipografía mediocre se delata.

Herramientas y recursos

• Google Fonts. Gratis, enorme, bien documentada, y fácil de alojar tú mismo. El punto de partida obvio.
• Adobe Fonts. Incluida con una suscripción a Creative Cloud, y más fuerte en familias diseñadas profesionalmente.
• Una fundición tipográfica. De ahí salen las tipografías distintivas, y el lugar para encontrar una fuente que nadie más en tu categoría esté usando. Más cara y más distintiva, que suele ser justo el punto.
• Fontpair y Typewolf. Útiles para ver combinaciones aplicadas a diseños reales en vez de a hojas de muestra.
• El inspector de tu navegador. La forma más rápida de saber qué tipografía usa un sitio que te gusta.

Cómo saber qué tipografía usa un sitio web

Haz clic derecho sobre el texto, elige Inspeccionar, y busca la propiedad font-family en el panel de estilos calculados. El primer nombre de la lista es el que se está usando. Extensiones del navegador como WhatFont hacen el mismo trabajo en un clic, y son más rápidas cuando solo tienes curiosidad.

Vale la pena hacer esto seguido. Cuando la tipografía de un sitio se siente bien, buscar qué fuentes usa enseña más que cualquier lista de recomendaciones.

Aplicar tu elección

Una vez que elegiste, tres cosas marcan la diferencia entre una buena decisión y un buen resultado.

Carga las fuentes bien. Aloja tú mismo donde puedas, precarga los archivos críticos, y usa font-display para que el texto sea visible mientras la fuente carga en vez de quedar invisible.

Documéntalo. Al diseñar cada pieza nueva, registra la fuente principal, la secundaria, los tamaños, los pesos y el espaciado en tus lineamientos de marca junto con tus otros elementos de diseño. Una elección que nadie escribió termina siendo rehecha por la siguiente persona.

Aplícala de forma consistente. Sitio web, propuestas, presentaciones, redes sociales. Diseñar tu sitio web es solo el inicio, y la tipografía es uno de los pocos elementos de marca presentes en todas partes, así que la consistencia aquí hace más por el reconocimiento que casi cualquier otra cosa.

Preguntas sobre cómo elegir tipografía

¿Qué es la regla de las 3 fuentes?

Dice que no se deben usar más de tres tipografías en un mismo diseño. En diseño web, dos suele ser mejor: una para encabezados, una para cuerpo de texto. La regla existe porque cada fuente adicional le cuesta coherencia al sitio, y la coherencia es lo que hace que un sitio se vea profesional.

¿Cuál es la tipografía más atractiva para un sitio web?

No hay una respuesta universal, y la pregunta está un poco mal planteada. En el cuerpo del texto, la mejor fuente es la que desaparece. En los encabezados, elige la tipografía que encaje con tu marca en vez de la que esté de moda en este momento.

¿Qué fuente se ve bien en un sitio web?

Inter, Open Sans, Source Sans, Roboto y Lato son confiables para cuerpo de texto. Georgia, Merriweather y Playfair Display funcionan bien donde quieras una serif. Todas son gratis en Google Fonts y ninguna te va a hacer quedar mal, así que no hace falta buscar una fuente que nadie conozca.

¿Cuántas fuentes debería usar en mi sitio web?

Dos. Tres como límite absoluto, y solo cuando la tercera tiene un trabajo muy específico. Si quieres la opción con menos riesgo, usa una sola familia en todo el sitio.

¿Cómo combino fuentes para mi sitio web?

O combinas una serif con una sans serif para que el contraste sea claro, o usas una sola familia y construyes jerarquía con peso y tamaño. Iguala las alturas de x, asígnale a cada fuente un rol fijo, y no pases de dos.

¿Qué factores debería considerar al elegir una fuente?

Encaje con la marca, legibilidad en tus tamaños reales, el rango de pesos de la familia, el rendimiento de carga, la licencia, y cómo se ve con tu contenido real. Más o menos en ese orden, y el tipo de fuente importa menos que cualquiera de esos factores.

¿Son suficientes las Google Fonts para un sitio web profesional?

Sí. Muchos de los sitios mejor diseñados de la web las usan. Una tipografía a medida compra distinción, no calidad, y es una decisión que llega después, no primero.

Acertar con la tipografía en tu propio sitio

Elegir la tipografía parece una decisión pequeña y se comporta como una grande. Define qué tan creíble te ves, cuánto de lo que escribes se lee, y qué tan rápido te reconoce la gente.

Eso es parte de lo que hacemos en Dancing Pels en Sitios Web a Medida: un sistema tipográfico elegido desde el posicionamiento, probado en tamaños reales, y documentado para que el sitio siga viéndose como él mismo dos años después.

Si las fuentes de tu sitio se eligieron desde un menú desplegable y nadie las ha vuelto a mirar, agenda una llamada de 30 minutos y le echamos un vistazo.