La tipografía es el 95% del diseño web. No es exageración: la mayor parte de tu web es texto. Elegir las fuentes correctas afecta a la legibilidad, la percepción de tu marca y las conversiones. Una mala elección puede arruinar un diseño perfecto.
Esta guía te enseña a seleccionar tipografías que funcionen, combinarlas correctamente y aplicarlas de forma profesional. Sin necesidad de ser diseñador.
Si estás creando tu página web profesional, las tipografías son tan importantes como los colores que elijas.
Por qué la tipografía importa tanto
La tipografía afecta directamente a:
Legibilidad: Si el texto es difícil de leer, el usuario se va. El 38% de visitantes abandonan webs con tipografías poco legibles.
Percepción de marca: Las fuentes transmiten personalidad. Una tipografía serif clásica dice “tradición y confianza”. Una sans-serif moderna dice “innovación y accesibilidad”.
Tiempo en página: Textos cómodos de leer mantienen al usuario más tiempo. Más tiempo = más probabilidad de conversión.
Accesibilidad: Una tipografía adecuada permite que personas con dificultades visuales puedan usar tu web.
Rendimiento: Fuentes mal optimizadas ralentizan la carga. Cada milisegundo cuenta.
Tipos de tipografías y cuándo usar cada una
Serif: Tradición y elegancia
Características: Tienen “serifas” (pequeños remates en los extremos de las letras).
Transmiten: Tradición, elegancia, autoridad, confianza, seriedad.
Ideales para: Bufetes de abogados, consultoras, medios de comunicación, lujo, editorial.
Ejemplos populares: Georgia, Times New Roman, Playfair Display, Merriweather, Lora.
En web: Funcionan muy bien para títulos. Para textos largos, elige versiones optimizadas para pantalla.
Sans-serif: Modernidad y claridad
Características: Sin serifas, líneas limpias.
Transmiten: Modernidad, simplicidad, accesibilidad, tecnología, frescura.
Ideales para: Tecnología, startups, e-commerce, webs corporativas modernas, cualquier sector.
Ejemplos populares: Open Sans, Roboto, Lato, Montserrat, Inter, Poppins.
En web: Las más versátiles. Excelente legibilidad en pantalla a cualquier tamaño.
Display/Decorativas: Personalidad y impacto
Características: Diseñadas para destacar, no para textos largos.
Transmiten: Creatividad, personalidad, impacto visual.
Ideales para: Títulos principales, logos, secciones destacadas.
Ejemplos populares: Bebas Neue, Oswald, Abril Fatface, Pacifico.
En web: Solo para títulos y elementos decorativos. Nunca para cuerpo de texto.
Monospace: Técnico y código
Características: Todos los caracteres ocupan el mismo ancho.
Transmiten: Técnico, código, precisión, retro-tech.
Ideales para: Blogs de programación, documentación técnica, elementos de código.
Ejemplos populares: Fira Code, Source Code Pro, JetBrains Mono, Roboto Mono.
En web: Para mostrar código. Ocasionalmente para estética técnica.
La regla de las 2 tipografías
Máximo 2 tipografías por web. Esta regla existe por buenas razones:
- Coherencia visual: Más fuentes = más caos.
- Rendimiento: Cada fuente adicional ralentiza la carga.
- Profesionalidad: Los diseños profesionales son contenidos, no recargados.
Cómo distribuirlas
| Uso | Tipografía | Ejemplo |
|---|---|---|
| Títulos (H1, H2, H3) | Principal (con personalidad) | Playfair Display, Montserrat |
| Cuerpo de texto | Secundaria (máxima legibilidad) | Open Sans, Roboto, Lato |
| Alternativa | Una sola tipografía | Inter (funciona para todo) |
Cuándo usar una sola tipografía
Una sola familia tipográfica bien elegida puede cubrir todas las necesidades usando:
- Diferentes pesos (Light, Regular, Bold, Black)
- Diferentes estilos (Normal, Italic)
Fuentes como Inter, Roboto o Source Sans Pro tienen suficientes variantes para crear jerarquía visual sin añadir más fuentes.
Combinaciones de tipografías que funcionan
Principios de combinación
Contraste, no conflicto: Las fuentes deben ser diferentes pero complementarias. Combinar dos serif similares crea conflicto. Combinar serif + sans-serif crea contraste armónico.
Jerarquía clara: La diferencia debe ser obvia. Si hay que mirar dos veces para notar el cambio, no funciona.
Misma “personalidad”: Ambas fuentes deben transmitir sensaciones compatibles.
10 combinaciones probadas
| Títulos | Cuerpo | Estilo |
|---|---|---|
| Playfair Display | Lato | Elegante y legible |
| Montserrat | Open Sans | Moderno y limpio |
| Oswald | Roboto | Impactante y funcional |
| Merriweather | Source Sans Pro | Editorial y accesible |
| Poppins | Inter | Tech y minimalista |
| Abril Fatface | Poppins | Lujo y modernidad |
| Raleway | Roboto | Sofisticado y versátil |
| Lora | Open Sans | Clásico y contemporáneo |
| Bebas Neue | Lato | Bold y equilibrado |
| DM Serif Display | DM Sans | Coherente y profesional |
Combinaciones por sector
Tecnología/Startup: Poppins + Inter, Montserrat + Open Sans
Legal/Finanzas: Merriweather + Source Sans Pro, Playfair Display + Lato
Moda/Lujo: Abril Fatface + Poppins, Playfair Display + Montserrat
Salud/Bienestar: Lora + Open Sans, Raleway + Roboto
Restaurantes: Oswald + Lato, Bebas Neue + Open Sans
Tamaños y jerarquía tipográfica
Tamaños recomendados
| Elemento | Móvil | Escritorio | Peso |
|---|---|---|---|
| H1 | 28-32px | 40-56px | Bold/Black |
| H2 | 24-28px | 32-40px | Bold |
| H3 | 20-24px | 24-32px | SemiBold |
| H4 | 18-20px | 20-24px | SemiBold |
| Cuerpo | 16-18px | 16-18px | Regular |
| Pequeño | 14px | 14px | Regular |
| Caption | 12px | 12px | Regular/Light |
Regla crítica: El cuerpo de texto nunca menor de 16px. Menos de eso causa fatiga visual y problemas de accesibilidad.
Escala tipográfica
Usa una escala consistente para crear armonía. La más común es la escala de proporción áurea o la Major Third (1.25):
Ejemplo con base 16px:
- Cuerpo: 16px
- H4: 20px (16 × 1.25)
- H3: 25px (20 × 1.25)
- H2: 31px (25 × 1.25)
- H1: 39px (31 × 1.25)
Interlineado (line-height)
El espacio entre líneas afecta dramáticamente la legibilidad:
| Tipo de texto | Line-height |
|---|---|
| Títulos | 1.1 - 1.3 |
| Cuerpo de texto | 1.5 - 1.7 |
| Texto largo (artículos) | 1.6 - 1.8 |
Regla general: Cuanto más largo el texto, más interlineado necesita.
Longitud de línea
El ancho ideal de una línea de texto es de 50-75 caracteres. Más largo causa fatiga. Más corto interrumpe la lectura.
En CSS, esto equivale aproximadamente a:
max-width: 65chpara contenido de lecturamax-width: 75chcomo máximo absoluto
Google Fonts: las mejores fuentes gratuitas
Google Fonts ofrece más de 1.500 fuentes gratuitas y optimizadas para web. Estas son las más recomendadas:
Top 10 Sans-serif
| Fuente | Mejor uso | Pesos disponibles |
|---|---|---|
| Inter | Todo uso | 9 pesos |
| Roboto | Todo uso | 6 pesos |
| Open Sans | Cuerpo | 5 pesos |
| Lato | Cuerpo | 5 pesos |
| Montserrat | Títulos | 9 pesos |
| Poppins | Títulos y cuerpo | 9 pesos |
| Nunito | Friendly | 7 pesos |
| Source Sans Pro | Corporativo | 6 pesos |
| Raleway | Elegante | 9 pesos |
| Work Sans | Moderno | 9 pesos |
Top 5 Serif
| Fuente | Mejor uso | Pesos disponibles |
|---|---|---|
| Playfair Display | Títulos elegantes | 6 pesos |
| Merriweather | Lectura larga | 4 pesos |
| Lora | Editorial | 4 pesos |
| Crimson Text | Clásico | 3 pesos |
| Source Serif Pro | Profesional | 6 pesos |
Cómo añadir Google Fonts
Opción 1: Enlace en HTML (más fácil)
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Opción 2: @import en CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');Opción 3: Descargar y hostear (mejor rendimiento) Descarga las fuentes y súbelas a tu servidor para evitar llamadas externas.
Optimización de rendimiento
Las fuentes pueden ralentizar significativamente tu web si no se optimizan.
Carga solo lo necesario
Mal: Cargar toda la familia (12 pesos × 2 estilos = 24 archivos)
Bien: Cargar solo los pesos que usas (Regular 400, SemiBold 600, Bold 700)
Usa font-display: swap
Evita el “flash of invisible text” (FOIT):
@font-face {
font-family: 'Inter';
font-display: swap;
}Con swap, el texto se muestra inmediatamente con una fuente del sistema y cambia cuando carga la fuente personalizada.
Preconecta a Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Formatos modernos
- WOFF2: El más comprimido, soportado por todos los navegadores modernos
- WOFF: Fallback para navegadores antiguos
Si hosteas las fuentes tú mismo, usa solo WOFF2 para navegadores modernos.
Errores comunes con tipografías
Error 1: Demasiadas fuentes
Problema: Usar 4-5 tipografías diferentes. Caos visual.
Solución: Máximo 2 fuentes. Una para títulos, otra para cuerpo.
Error 2: Texto demasiado pequeño
Problema: Cuerpo de texto en 12-14px. Ilegible en móvil.
Solución: Mínimo 16px para cuerpo de texto. 18px es aún mejor.
Error 3: Poco contraste
Problema: Texto gris claro sobre fondo blanco.
Solución: Ratio de contraste mínimo 4.5:1. El texto principal debe ser casi negro (#1a1a1a, no #666666).
Error 4: Líneas demasiado largas
Problema: Texto que ocupa todo el ancho de pantalla.
Solución: Limita a 65-75 caracteres por línea. Usa max-width en CSS.
Error 5: Interlineado insuficiente
Problema: Líneas pegadas que cuestan leer.
Solución: Line-height de 1.5-1.7 para cuerpo de texto.
Error 6: Fuentes decorativas para todo
Problema: Usar Comic Sans o Pacifico para párrafos completos.
Solución: Fuentes decorativas solo para títulos o elementos puntuales.
Tipografía responsive
Las fuentes deben adaptarse a diferentes dispositivos.
Unidades relativas
Usa rem en lugar de px para escalabilidad:
html { font-size: 16px; }
h1 { font-size: 2.5rem; } /* 40px */
p { font-size: 1rem; } /* 16px */Media queries para tipografía
h1 {
font-size: 1.75rem; /* Móvil: 28px */
}
@media (min-width: 768px) {
h1 {
font-size: 2.5rem; /* Tablet/Desktop: 40px */
}
}Fluid typography (avanzado)
Escala automática entre tamaños mínimo y máximo:
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}Preguntas frecuentes
¿Cuántas fuentes debería usar en mi web?
Máximo 2. Una para títulos y otra para cuerpo de texto. Si quieres simplificar, una sola fuente con diferentes pesos funciona perfectamente.
¿Las fuentes de Google son realmente gratis?
Sí, 100% gratuitas incluso para uso comercial. Están bajo licencias Open Font License.
¿Afectan las fuentes al SEO?
Indirectamente. Las fuentes afectan a la velocidad de carga (factor SEO) y a la experiencia de usuario (tiempo en página, rebote). Fuentes bien optimizadas mejoran ambas métricas.
¿Puedo usar cualquier fuente en mi web?
No. Las fuentes tienen licencias. Algunas son gratuitas (Google Fonts), otras requieren compra (Adobe Fonts premium). Usar fuentes sin licencia puede tener consecuencias legales.
¿Qué tamaño mínimo debe tener el texto?
16px para cuerpo de texto es el estándar mínimo. Por debajo, causa problemas de legibilidad y accesibilidad. Para usuarios mayores o webs de lectura intensiva, 18px es preferible.
¿Cómo sé si mi combinación de fuentes funciona?
- Deben ser claramente diferentes (contraste)
- Deben transmitir sensaciones compatibles (no formal + infantil)
- Prueba leyendo un párrafo largo con tu combinación
- Pide opinión a personas de tu público objetivo
Conclusión: Tipografía es comunicación
La tipografía correcta hace que tu web sea legible, profesional y memorable. La incorrecta ahuyenta visitantes y daña tu imagen.
Resumen de mejores prácticas:
- Máximo 2 tipografías
- Sans-serif para legibilidad, serif para elegancia
- Mínimo 16px para cuerpo de texto
- Line-height de 1.5-1.7
- Máximo 65-75 caracteres por línea
- Contraste adecuado (texto oscuro sobre fondo claro)
- Optimiza la carga (solo pesos necesarios)
¿Listo para aplicar estos principios? Con el hosting de Avantys y su constructor Sitejet, puedes personalizar tipografías fácilmente con vista previa en tiempo real.
Continúa con nuestra guía completa para crear tu página web profesional para más consejos de diseño.
Artículos relacionados del cluster
Sigue mejorando tu diseño:
- Cómo elegir los colores para tu web
- Diseño responsive: cómo adaptar tu web a móvil
- Cómo mejorar la velocidad de tu página web
- CTAs efectivos: botones que convierten
- Errores comunes al crear una página web
- WordPress vs constructor web
¿Quieres que lo hagamos por ti?
En Avantys gestionamos tu web, hosting y crecimiento digital de punta a punta. Tú a lo importante.
