Diseño de interacción (UI)
La tipografía como sistema
Un proyecto digital sólido se apoya en un sistema tipográfico coherente:
- Jerarquías claras
- Relación modular entre tamaños
- Consistencia entre páginas y componentes
- Ritmo vertical controlado
- Integración en el Design System (sistema de diseño)
La tipografía no se “elige”; se construye.
Jerarquía visual
Una buena jerarquía hace el contenido escaneable. La estructura más habitual incluye:
- H1 → titulares con intención
- H2 → estructura de secciones
- H3–H6 → subdivisiones y soporte
- Body → textos de lectura
- Lead text → introducciones amplias
- Meta → etiquetas, categorías, microtextos
La jerarquía no depende solo del tamaño: combina peso, contraste, espaciado y ritmo.
Ritmo vertical
El ritmo vertical determina cómo respira el contenido:
- Interlineado (line-height)
- Espaciado entre párrafos
- Distancias entre títulos y bloques
- Coherencia modular en todo el documento
Si el ritmo vertical está bien construido, el diseño se percibe limpio y profesional sin que el usuario sepa por qué. Si está mal construido, toda la web parece caótica aunque el diseño “se vea bonito”.
Tamaños relativos
El diseño moderno exige que la tipografía se adapte sin depender de valores fijos.
rem
Control total desde la raíz → perfecto para escalas consistentes.
em
Escala relativa al contenedor → ideal para componentes.
Clamp(): tipografía fluida
La técnica más eficaz para tipografía responsive.
font-size: clamp(1.4rem, 2vw, 2rem);
Tipografía responsive
En móvil
- Tamaños algo más grandes para lectura cercana
- Interlineado más amplio
- Líneas más cortas (ideal 45–60 caracteres)
- Menos niveles de jerarquía simultáneos
En desktop
- Líneas más largas pero controladas
- Títulos con más presencia
- Mayor variedad jerárquica
- Ritmo vertical amplio
La tipografía se lee diferente en cada dispositivo.
👉 En nuestro artículo sobre diseño responsive puedes aprender más.
Elige la tipografía adecuada
Al elegir una tipografía para diseño digital debes tener en cuenta, la estética, la funcionalidad y el rendimiento.
Estética
Define la personalidad del proyecto: editorial, técnica, elegante, fresca…
Función
Evalúa si se necesita legibilidad alta, variedad de pesos, soporte multiidioma, etc.
Rendimiento
Cuanto más ligera la tipografía, más eficiente la web.
Formatos recomendados: woff2 y subsets optimizados.
Microtipografía
- Kerning ajustado
- Tracking sutil
- Control de viudas y huérfanas
- Guiones automáticos
- Ajustes ópticos
Es el nivel superior del diseño editorial trasladado al entorno digital.
Tipografía en UI
En botones, formularios, etiquetas, menús y elementos funcionales, la tipografía debe ser:
- Compacta
- Legible
- Consistente
- Sin florituras
Aquí los tamaños relativos (em) son fundamentales para mantener la coherencia entre componentes.
Accesibilidad
Una tipografía accesible:
- Tiene contraste suficiente (AA o AAA)
- Evita pesos “thin” o demasiado ligeros
- Usa tamaños mínimos legibles
- Respeta la altura x
- No abusa de mayúsculas en bloques largos
Una web bonita sin accesibilidad es una web incompleta.
👉 Hay algunos colores y combinaciones que debes evitar en diseño digital si quieres mantenerla.
Errores comunes que debes evitar
- ❌ Usar demasiadas fuentes
- ❌ Títulos gigantes sin ritmo que colapsan el diseño
- ❌ Líneas interminables
- ❌ Interlineado insuficiente
- ❌ Mala adaptación a móvil
- ❌ Contraste deficiente
- ❌ No usar técnicas modernas como
clamp() ❌ Cargar fuentes pesadas sin optimizar
La tipografía en diseño web no es un detalle estético: es el esqueleto invisible que sostiene la experiencia.
Cuando está bien diseñada, transforma contenido en narrativa visual. Cuando falla, todo el diseño se resiente.
