Cómo elegir las fuentes de tu web: legibilidad, personalidad y velocidad

Una buena fuente para la web es, primero, legible; segundo, adecuada para tu marca; y tercero, ligera para la velocidad de la página. Las tipografías tienen personalidad — las letras con serifa suelen leerse como tradicionales y las de palo seco redondeadas como cercanas —, pero esas impresiones son más suaves de lo que parecen y la legibilidad siempre gana. Dos fuentes, un cuerpo de texto de al menos 16 píxeles y pocos archivos de fuente cubren la mayoría de las webs de empresa.

Puntos clave

• La legibilidad gana a la personalidad: elige una fuente limpia para el texto y pon el carácter en los titulares.
• Usa como máximo dos familias tipográficas, y pocos pesos, para un aspecto más tranquilo y una página más rápida.
• El texto debe tener al menos 16 píxeles y un interlineado generoso.
• Las fuentes son archivos que descarga cada visitante, así que afectan a la velocidad y a la estabilidad del diseño.
• Las mismas fuentes deberían aparecer en tu web, tus documentos y tus presentaciones.

Qué comunican las fuentes

Las tipografías con serifa, con pequeños remates en los extremos de las letras, suelen parecer consolidadas y editoriales. Las de palo seco parecen modernas y directas. Las formas redondeadas parecen cercanas, y las letras estrechas y gruesas, ruidosas. Los despachos de abogados y las consultoras suelen inclinarse por titulares con serifa, mientras que las empresas de software y los estudios de diseño suelen elegir palo seco geométrico.

Son tendencias, y un buen diseñador puede romperlas a propósito. Usa la personalidad como motivo para elegir entre dos fuentes legibles, no como excusa para aceptar una difícil de leer.

La legibilidad decide

Los visitantes escanean antes de leer, y cada pequeño obstáculo les cuesta atención. Para el texto, elige una fuente con formas claras, espaciado abierto y caracteres bien distintos, para que una I mayúscula y una l minúscula no se parezcan. Usa un tamaño de al menos 16 píxeles, un interlineado de alrededor de 1,5 y líneas de una longitud cómoda, de unos 50 a 75 caracteres.

El contraste también importa aquí. Nuestro artículo sobre la psicología del color trata la relación de 4,5 a 1 para el texto normal. Además, alinea el texto a la izquierda, porque el texto justificado crea huecos irregulares que dificultan la lectura.

Combinaciones: quédate en dos

Un enfoque habitual es una fuente para los titulares y otra para el texto, elegidas para contrastar. Un titular con serifa y un texto de palo seco es una combinación clásica, igual que al revés. Usa una sola familia con varios pesos si quieres la opción más segura. Más de dos familias hacen que una web parezca improvisada y añaden peso a la descarga.

Usa el tamaño, el peso y el espaciado para crear jerarquía, no fuentes extra.

Fuentes y velocidad

Cada archivo de fuente que descarga un visitante cuesta tiempo. Cada peso y estilo es un archivo distinto, así que una familia cargada en seis pesos son seis descargas. Carga solo los pesos que usas, prefiere formatos modernos como WOFF2 y aloja los archivos en tu propio dominio cuando la licencia lo permita, lo que evita una conexión extra con un tercero.

La carga de fuentes también afecta a la estabilidad del diseño. Si una fuente de respaldo se sustituye por la real después de que aparezca la página, el texto puede saltar, y eso cuenta en contra del Cumulative Layout Shift. El umbral de Google para una buena puntuación es 0,1 o menos. Configurar la fuente para que muestre rápido una alternativa y elegir una alternativa de proporciones parecidas reduce el salto. Nuestra guía de velocidad web explica estas métricas.

Licencias y coherencia

Revisa la licencia antes de usar una fuente. Muchas son gratuitas para uso web con una licencia abierta, mientras que otras necesitan una licencia de pago que cubra webs. Guarda los datos de la licencia con los archivos de tu marca.

Después usa las mismas fuentes en tu web, tus documentos, tus propuestas y tus presentaciones. Si un programa no tiene tu fuente, indica una alternativa parecida en tu guía de marca. Nuestro artículo sobre sistemas de marca explica por qué esta coherencia genera reconocimiento.

Una receta sencilla

Elige una fuente legible para el texto y otra para los titulares, o una sola familia para ambos. Pon el texto a 16 píxeles o más con interlineado de 1,5, carga solo los pesos que necesitas y prueba el resultado en un móvil. Si quieres una segunda opinión, nuestra auditoría web gratuita revisa la velocidad y el diseño, y una llamada de descubrimiento gratuita de 30 minutos es el momento de hablar de renovar tu marca. Mira nuestros servicios para ver cómo trabajamos marca y web juntas.