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.
Del concepto a la práctica
Taller de esta lección
Una escala tipográfica reduce decisiones improvisadas y mantiene la lectura estable entre pantallas. No basta con elegir tamaños: cada nivel necesita una función, un peso y una altura de línea que permitan distinguir encabezados, datos y ayuda.
Ejemplo resuelto
Para la pantalla de biblioteca se define título 32/38 seminegrita, encabezado de sección 22/28 seminegrita, cuerpo 16/24 regular, etiqueta 14/20 media y nota 12/17 regular. El título «Resultados disponibles» usa el nivel de sección; «Disponible» usa etiqueta. Ningún párrafo largo se centra ni se justifica.
Pruébalo
Lista los textos de una tarjeta y clasifícalos por función.
Asigna cinco niveles sin crear un tamaño nuevo para cada elemento.
Ajusta la altura de línea para evitar bloques apretados.
Revisa la tarjeta en una columna estrecha y otra amplia.
Error frecuente: usar peso negrita para corregir una jerarquía confusa. Corrige primero el nivel, el espacio y la longitud de línea; reserva el peso para diferenciar funciones.
Ejercicio: compón una tarjeta de libro con título de tres líneas, autor, fecha y estado.
Comprueba tu resultado
el título conserva lectura clara sin desbordar, y los cuatro datos se distinguen sin superar cinco estilos tipográficos.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗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.
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.