La buena tipografía trata sobre estructura e intención. Cuando tus fuentes de encabezado y cuerpo trabajan juntas, crean un camino de lectura claro, reducen la fricción y resaltan la información más importante.
1. Contraste con Cohesión
Elige fuentes lo suficientemente diferentes para ser útiles, pero lo bastante similares para sentirse relacionadas. Piénsalo como un diseño editorial: el encabezado atrae la atención, el cuerpo mantiene al lector interesado.
- Encabezados: Confiados y con carácter: marcan el tono.
- Cuerpo: Neutro y altamente legible: realiza el trabajo pesado.
Ejemplo:
‘Libre Baskerville’ (encabezados) + ‘Inter’ (cuerpo): voz clásica con legibilidad moderna.
2. Legibilidad Ante Todo
Prioriza contornos abiertos, formas claras y espaciado generoso. Usa una altura de línea cómoda (~1.6–1.8) para que los párrafos respiren y la lectura sea fluida.
- Tamaño base: 16–18px en escritorio; aumenta en pantallas más pequeñas.
- Espaciado entre letras: ligeramente positivo para etiquetas en mayúsculas o texto pequeño de interfaz.
Prueba con pasajes largos, no solo encabezados: el contenido real revela los verdaderos problemas.
3. Limita la Familia
Evita usar demasiadas fuentes. Un conjunto reducido es más fácil de mantener y carga más rápido.
- Una tipografía display o serif para encabezados.
- Una sans-serif para cuerpo y elementos de interfaz.
- Un acento opcional (itálica o condensada) para citas o llamados a la acción.
Mantén los pesos de fuente con propósito: regular/medio para texto, seminegrita/negrita para énfasis.
4. Color y Contraste Aprobados
El contraste de color legible no es negociable. Apunta a WCAG AA (4.5:1 para texto principal). Prueba tu paleta temprano para evitar correcciones tardías.
- Usa un tono neutro oscuro para los párrafos (por ejemplo, #2b2b2b).
- Reserva colores de acento para encabezados, enlaces y elementos clave de la interfaz.
Consejo:
Revisa el contraste antes de publicar: el texto pequeño necesita más contraste que los encabezados grandes.
5. Adaptable, No Solo Escalable
La tipografía debe adaptarse a los diferentes tamaños de pantalla. Ajusta el tamaño, el largo de línea y el espaciado para que la lectura sea cómoda en cualquier dispositivo.
- Apunta a 45–75 caracteres por línea para el cuerpo del texto.
- Usa escalas de tipo fluidas o
clamp()para un redimensionamiento suave.
Pon el Sistema en Marcha
Prueba esta receta inicial y ajústala según tu marca:
- Encabezados: Libre Baskerville con altura de línea ajustada para impacto.
- Cuerpo: Inter a 18px, altura de línea 1.7 para lectura cómoda.
- Colores: encabezados #006fbf; cuerpo #2b2b2b; enlaces usan el color del encabezado.
- Acento: Inter Medium para botones; Itálica solo para citas.
- Revisa en móvil y escritorio; ajusta el espaciado hasta que la lectura sea natural.
Cuando las fuentes se eligen con intención, tu interfaz se vuelve más clara, rápida y confiable: sin trucos, solo buen oficio tipográfico.