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.