Actualizado el 10 de noviembre de 2026 por Nicolas Finet, CEO de Sortlist. Hemos reescrito esta guía: cómo elegir tipografías para una web (familias serif, sans serif, display y monoespaciadas), criterios de legibilidad, rendimiento y licencia, combinaciones de ejemplo y errores frecuentes. Los nombres de fuentes son ejemplos habituales; comprueba la licencia de cada una.
La tipografía determina cómo se lee y cómo se percibe una web. Una buena elección combina legibilidad, personalidad de marca y rendimiento.
Lo esencial
- Usa una o dos familias; más fuentes complican la jerarquía y ralentizan la carga.
- Prioriza la legibilidad del texto de lectura: tamaño, interlineado y contraste adecuados.
- Comprueba la licencia de uso web y el peso de los archivos de fuente.
Qué familia usar según el contexto
| Familia | Características | Ejemplos habituales | Ideal para |
|---|---|---|---|
| Serif (con remates) | Tradición, elegancia y autoridad | Playfair Display, Merriweather, Lora | Titulares y textos largos; medios, lujo, educación |
| Sans serif (palo seco) | Modernidad y claridad | Inter, Open Sans, Montserrat, Roboto | Interfaces, textos de lectura en pantalla, tecnología |
| Display o decorativa | Personalidad fuerte | Fuentes de carácter para títulos | Titulares breves; no para textos largos |
| Monoespaciada | Aspecto técnico | JetBrains Mono, Space Mono | Código y datos |
| Manuscrita | Cercanía e informalidad | Fuentes cursivas | Detalles; evita en cuerpo de texto |
5 tipografías elegantes y modernas para web (ejemplos)
| Fuente | Estilo | Uso recomendado |
|---|---|---|
| Inter | Sans serif neutra y muy legible en pantalla | Interfaces, texto de lectura |
| Playfair Display | Serif de alto contraste | Titulares editoriales |
| Montserrat | Sans serif geométrica | Marcas modernas, titulares |
| Lora | Serif de lectura cómoda | Artículos y blogs |
| DM Sans | Sans serif suave y contemporánea | Productos digitales y webs de servicios |
Son ejemplos habituales por su disponibilidad y calidad; la elección final depende de tu marca. Comprueba la licencia de cada familia (muchas tienen licencia libre, pero no todas).
Criterios para decidir
- Legibilidad: distingue bien letras parecidas (I, l, 1), con buen espaciado y tamaños suficientes.
- Personalidad: coherente con el posicionamiento. Ver tono de voz e identidad visual.
- Rendimiento: limita pesos y variantes; usa formatos modernos (WOFF2) y estrategias de carga. Ver velocidad web.
- Licencia: uso web y comercial, número de visitas o dominios si es de pago.
- Soporte de idiomas: acentos, ñ, signos de puntuación y símbolos que necesites.
- Accesibilidad: contraste y tamaño; evita texto muy fino sobre fondos claros. Ver accesibilidad web.
Una combinación segura: una sans serif para interfaz y texto, y una serif o display para titulares. Si dudas, usa una sola familia con varios pesos.
Consejo del equipo editorial de Sortlist
Jerarquía y tamaños recomendados
| Elemento | Orientación |
|---|---|
| Texto de lectura | Entre 16 y 18 px, con interlineado de 1,5 aproximadamente |
| Titulares | Escala proporcional (por ejemplo, 1,25 veces entre niveles) |
| Longitud de línea | Unos 60-75 caracteres para lectura cómoda |
| Pesos | Normal y negrita; pocos pesos adicionales |
Son orientaciones habituales, no normas; prueba con tu contenido y tus usuarios.
Cómo cargar fuentes sin perder rendimiento
- Sirve las fuentes desde tu propio dominio cuando puedas, para mejorar el rendimiento y la privacidad (carga desde servicios externos puede implicar tratamiento de datos de usuarios).
- Carga solo los pesos y subconjuntos de caracteres necesarios.
- Usa la propiedad
font-displaypara evitar texto invisible durante la carga. - Define una fuente alternativa del sistema parecida para minimizar saltos de diseño.
Errores frecuentes
- Usar más de dos familias sin criterio.
- Texto de lectura en fuentes decorativas.
- Tamaños pequeños y poco contraste.
- No comprobar licencias.
- Cargar muchos pesos y ralentizar la web.
Preguntas frecuentes sobre tipografías web
¿Cuántas tipografías debería usar mi web?
Una o dos, con pocos pesos.
¿Qué fuente es mejor para leer en pantalla?
Las sans serif y serif diseñadas para pantalla, con buen tamaño y contraste; prueba con tu contenido.
¿Puedo usar cualquier fuente que encuentre?
No: comprueba la licencia de uso web y comercial.
¿Cómo elijo para mi marca?
Desde tu posicionamiento y tu público, validando legibilidad y rendimiento.
¿Necesitas ayuda? Publica tu proyecto en Sortlist y compara agencias de España.
Fuentes: elaboración del equipo editorial de Sortlist; para accesibilidad, W3C, WCAG 2.2.
