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.

Aplicación práctica en un caso real

Aplicar Tipografía para Sistemas de UI dentro del contexto de Diseño UI y Sistemas de Diseño con criterio práctico, evitando quedarse en una definición aislada. Para que esta lección sea útil, imagina un escenario concreto: tienes que usar este tema para mejorar un proceso, tomar una decisión, crear un entregable o explicar una recomendación a otra persona. La pregunta no es solo “qué significa”, sino “qué haría diferente después de entenderlo”.

Un buen uso empieza por delimitar el problema. Define qué resultado quieres lograr, qué información tienes disponible, qué restricciones existen y cómo sabrás si la decisión fue correcta. Esta forma de pensar evita respuestas genéricas y convierte el aprendizaje en una herramienta de trabajo.

Marco de decisión

Antes de avanzar, revisa tres niveles: primero, el objetivo operativo; segundo, los recursos disponibles; tercero, el riesgo de equivocarte. En Diseño UI y Sistemas de Diseño, muchas decisiones fallan porque se copia una táctica sin entender el contexto. El marco correcto te obliga a adaptar, no solo repetir.

• Objetivo: qué resultado medible o visible quieres conseguir.
• Contexto: quién usará esto, con qué nivel de experiencia y bajo qué restricciones.
• Acción: cuál es el siguiente paso mínimo que puedes ejecutar hoy.
• Señal: qué evidencia vas a observar para decidir si funcionó.

Ejemplo guiado

Supón que debes implementar esta idea en una pequeña empresa o proyecto personal. En vez de intentar una versión perfecta, prepara una versión mínima: una plantilla, una prueba, una lista de control, una automatización simple, una página, un mensaje o una medición inicial. Luego pide feedback o compara el resultado contra una métrica.

Si el resultado mejora, documenta el proceso. Si no mejora, identifica si falló la hipótesis, la ejecución o la medición. Esta distinción es clave: muchas personas abandonan una buena idea por una mala primera ejecución, o escalan una mala idea porque miraron la métrica equivocada.

Errores frecuentes

• Confundir actividad con avance: hacer muchas tareas sin saber qué resultado persiguen.
• Copiar ejemplos sin adaptarlos al cliente, audiencia, equipo o nivel técnico real.
• No dejar evidencia: si no registras decisiones y resultados, no aprendes del proceso.
• Querer automatizar o escalar antes de validar que el enfoque básico funciona.

Ejercicio práctico

1. Escribe el objetivo de esta lección en una frase aplicada a tu caso.
2. Define un entregable pequeño que puedas crear en menos de una hora.
3. Lista tres criterios para evaluar si ese entregable está bien hecho.
4. Ejecuta una versión inicial y anota qué cambiarías en una segunda iteración.

Checklist de salida

• Puedo explicar el concepto con mis propias palabras.
• Tengo un ejemplo aplicado, no solo una definición.
• Sé qué error debo evitar primero.
• Tengo una acción concreta para practicar esta semana.