Índice de contenidos
La tipografía es el 95% del diseño web. No exageramos. El texto es el principal medio de comunicación en tu sitio, y la fuente que elijas define cómo se percibe tu mensaje.
1. Por Qué la Tipografía Importa
- Legibilidad: Si no se lee fácil, el visitante se va
- Personalidad de marca: Una fuente serif transmite tradición; una sans-serif, modernidad
- Jerarquía visual: Diferentes pesos y tamaños guían la lectura
- Confianza: Tipografías profesionales generan credibilidad
2. Tipos de Fuentes Web
- Serif (con remates): Times, Georgia, Playfair Display. Elegantes, tradicionales
- Sans-serif (sin remates): Inter, Roboto, Open Sans. Modernas, limpias
- Monospace: Fira Code, JetBrains Mono. Para código y datos técnicos
- Display: Fuentes decorativas para títulos grandes. Usar con moderación
3. Reglas para Elegir Tipografía
- Máximo 2-3 fuentes: Una para títulos, una para cuerpo, opcionalmente una para acentos
- Contraste entre fuentes: Si una es serif, la otra debería ser sans-serif
- Prioriza legibilidad: Bonita pero ilegible = mala tipografía
- Prueba en móvil: Lo que se ve bien en desktop puede ser ilegible en celular
- Considera la carga: Cada fuente agrega peso a tu página
Cuando dudes, elige Inter o Roboto para el cuerpo. Son legibles, versátiles y gratuitas. Para títulos, Space Grotesk o Poppins dan personalidad sin sacrificar legibilidad.
4. Combinaciones que Funcionan
| Títulos | Cuerpo | Estilo |
|---|---|---|
| Playfair Display | Source Sans Pro | Elegante y profesional |
| Poppins | Inter | Moderno y limpio |
| Space Grotesk | Inter | Tech y contemporáneo |
| Merriweather | Open Sans | Editorial y legible |
| Montserrat | Roboto | Versátil y popular |
5. Tamaños y Jerarquía
- Cuerpo de texto: 16-18px mínimo (nunca menos de 14px)
- H1 (título principal): 32-48px
- H2 (subtítulos): 24-32px
- H3 (sub-subtítulos): 20-24px
- Line-height: 1.5-1.7 para cuerpo de texto
- Ancho de línea: 60-75 caracteres por línea (ideal para legibilidad)
6. Google Fonts: Las Mejores Opciones
Google Fonts ofrece más de 1,500 fuentes gratuitas. Las más recomendadas:
- Inter: La más versátil para interfaces y texto
- Roboto: La fuente de Android, excelente para mobile-first
- Open Sans: Clara y profesional, ideal para contenido largo
- Poppins: Geométrica con personalidad, perfecta para títulos
- Lato: Cálida y amigable, buena para servicios
7. Rendimiento y Carga de Fuentes
- Carga solo los pesos necesarios: Regular (400) y Bold (700) suelen ser suficientes
- Usa font-display: swap: Muestra texto inmediatamente con fuente de respaldo
- Preconnect a Google Fonts: Agrega
<link rel="preconnect" href="https://fonts.googleapis.com"> - Considera self-hosting: Descargar las fuentes a tu servidor puede ser más rápido
1. ¿Cuántas fuentes debo usar en mi sitio web?
Máximo 2-3 fuentes: una para títulos, una para cuerpo de texto y opcionalmente una tercera para acentos o código. Más fuentes ralentizan la carga y crean confusión visual.
2. ¿Las fuentes de Google Fonts son realmente gratuitas?
Sí, todas las fuentes de Google Fonts son 100% gratuitas para uso personal y comercial. Puedes usarlas libremente en tu sitio web sin pagar licencias.
3. ¿Puedo usar cualquier fuente en mi sitio web?
No. Las fuentes tienen licencias. Las fuentes de Google Fonts son gratuitas. Otras fuentes como las de Adobe Fonts requieren suscripción. Usar fuentes sin licencia puede tener consecuencias legales.
8. Conclusión
La tipografía es una decisión de diseño que impacta directamente en la legibilidad, credibilidad y conversiones de tu sitio web. No la subestimes.
Elige fuentes legibles, mantén la jerarquía clara y optimiza la carga. Con las combinaciones y reglas de esta guía, tu sitio web comunicará profesionalismo y confianza.