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 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.