Lección 3 de 12 · Lectura y práctica
Tipografía para Sistemas de UI
Tipografía que Escala en Productos Digitales La tipografía representa el 90% del contenido visual de una interfaz. Una escala tipográfica bien definida hace que tu producto se sienta profesional y sea fácil de leer en cualquier.
Esta es una lección del contenido anterior de Cursalo. Si ya estudiaste o compraste este curso, entra con tu cuenta para guardar tu progreso y abrir el resto de las clases. No necesitas comprar nada de nuevo.
Tipografía que Escala en Productos Digitales
La tipografía representa el 90% del contenido visual de una interfaz. Una escala tipográfica bien definida hace que tu producto se sienta profesional y sea fácil de leer en cualquier dispositivo.
Construyendo una escala tipográfica
- Define 6-8 tamaños basados en una proporción matemática (1.25 o 1.333 son buenas opciones para UI)
- Ejemplo práctico: Display 36px, H1 30px, H2 24px, H3 20px, Body 16px, Small 14px, Caption 12px
- Cada tamaño necesita un line-height definido: títulos 120-130%, cuerpo 150-160%, captions 140%
- Define pesos consistentes: Regular (400) para cuerpo, Medium (500) para subtítulos, Semibold (600) para títulos, Bold (700) para énfasis
- Nunca uses más de 3 pesos de una misma fuente — Regular, Medium/Semibold y Bold son suficientes
Fuentes recomendadas para UI (todas gratuitas)
- Inter: la mejor fuente gratuita para UI — legible en cualquier tamaño, diseñada específicamente para pantallas
- Plus Jakarta Sans: moderna y geométrica, excelente para productos tech y startups
- DM Sans: limpia y minimalista, funciona muy bien para dashboards y herramientas SaaS
- Nunito Sans: redondeada y amigable, perfecta para productos consumer y educación
- Space Grotesk: con personalidad técnica, ideal para productos fintech y crypto
Reglas de tipografía en UI
- Longitud de línea óptima: 50-75 caracteres por línea para máxima legibilidad
- Tamaño mínimo: 14px para cuerpo de texto en desktop, 16px en móvil — nada menor a 12px excepto etiquetas
- No uses más de 2 familias tipográficas (una para headings, una para cuerpo) — idealmente solo 1
- Alinea texto a la izquierda (nunca justificado ni centrado para párrafos largos) para lectura natural en idiomas LTR
- Letter spacing: reduce ligeramente (-0.02em) en títulos grandes, mantén normal en texto de cuerpo
Consejo: Instala la fuente Inter ahora mismo. Es gratuita, tiene una escala de pesos completa y fue diseñada específicamente para interfaces digitales. Es la opción por defecto más segura.