Escala tipográfica: ritmo y jerarquía en una interfaz
Una escala tipográfica es un conjunto limitado de tamaños asignados a roles. Cómo construirla, qué números usar de partida y por qué el tamaño no basta.
¿Qué es una escala tipográfica?
Es la lista de tamaños que tu interfaz puede usar. Si tienes siete tamaños distintos para textos similares, la interfaz parece improvisada. Si tienes cuatro o cinco, y cada uno tiene un papel claro, la jerarquía se entiende sin esfuerzo.
La definición que mejor funciona en la práctica es esta: un conjunto limitado de tamaños de texto asignados a roles como cuerpo, etiqueta, título de sección y título de página (Design Project, “How to create a UI type scale”). El nombre del rol importa tanto como el número.
¿Por qué le importa a un diseñador?
Porque la tipografía es lo que más texto ocupa en casi cualquier pantalla. Si los tamaños no siguen un sistema, cada componente nuevo introduce uno más, y el equipo acaba discutiendo píxeles en lugar de decisiones. Una escala cierra esa discusión: el componente usa el rol, no un número.
También hace más fácil el trabajo de desarrollo. Un token de «título de sección» se puede cambiar en un solo lugar. Un «22 px» repetido en veinte componentes no.
¿Qué números usar como punto de partida?
No hay una cifra universal. Design Project ofrece estos valores de ejemplo, con una base de 16 px, y recomienda ajustarlos después de probarlos:
| Rol | Tamaño | Interlineado |
|---|---|---|
| Etiqueta | 0,875 rem | 1,4 |
| Cuerpo | 1 rem | 1,5 |
| Título de sección | 1,5 rem | 1,25 |
| Título de página | 2 rem | 1,15 |
Raw Studio ofrece un ejemplo parecido para una interfaz de producto, con un título principal de 32 px en semibold y un cuerpo de 16 px con interlineado de 1,6 (Raw Studio, “How typography hierarchy boosts UI usability”). Son referencias de partida. Ajusta según la fuente, el idioma y el tipo de producto.
Para texto largo, la guía de Butterick recomienda un interlineado de entre 120% y 145% del tamaño de letra, y considera demasiado apretado un 110% (Butterick, “Practical Typography: Line spacing”). Esa guía está pensada para texto impreso y para lectura prolongada, así que úsala como referencia para párrafos, no para etiquetas.
¿Cómo se construye una escala propia?
- Define los roles primero. Cuerpo, etiqueta, subtítulo, título de sección, título de página. Son los que necesitas en tu producto.
- Asigna un tamaño a cada rol. Empieza por el cuerpo, que debe ser legible en móvil y en escritorio. Después, los demás.
- Ajusta el interlineado por rol. Los títulos necesitan menos interlineado que los párrafos.
- Usa una proporción como borrador. Una proporción modular puede darte una secuencia inicial, pero no tienes que usar todos los valores que genera. Design Project la describe como una ayuda de diseño, no como un requisito.
- Prueba con contenido real. Textos largos, nombres de productos, idiomas con palabras más largas. Un título que funciona con tres palabras puede romperse con doce.
Hay un límite que no es solo estético. El criterio WCAG 1.4.12 (espaciado del texto, nivel AA) no te obliga a usar un interlineado concreto, pero exige que no se pierda contenido ni funciones cuando la persona aplica un interlineado de 1,5 veces el tamaño de letra, espaciado entre párrafos de 2 veces y espaciado entre letras y palabras de 0,12 y 0,16 veces (W3C, Understanding SC 1.4.12). Los títulos con interlineado justo o las cajas de altura fija son los primeros que se rompen. El detalle está en tipografía para interfaces.
Ejemplo
Ejemplo ilustrativo: una app de finanzas tiene cinco tamaños de título distintos, uno por pantalla, y textos de ayuda que cambian según quién los diseñó. El equipo reduce la escala a cuatro roles: cuerpo, etiqueta, título de sección y título de página. Cada rol tiene un tamaño, un peso y un interlineado documentados. En la primera revisión, el número de discrepancias baja de forma clara, y los diseñadores nuevos saben qué usar sin preguntar. Al probar con un idioma más largo, el título de sección se rompe; el equipo ajusta el interlineado de ese rol y no el tamaño de todos.
¿Cuándo NO conviene una escala cerrada?
- En una pieza de marketing con una sola página. Una escala rígida limita la expresión. Puedes hacer excepciones documentadas.
- Si la interfaz tiene muy pocos textos. Con dos tamaños, la escala es trivial y no hace falta documentarla.
- Cuando la escala se aplica sin probar. Una tabla de números bonita que nunca se ha visto en un móvil real no sirve.
Errores comunes
- Tener demasiados tamaños muy parecidos, como 15, 16 y 17 px para cosas distintas.
- Escalar todos los roles por igual cuando el problema está solo en un título.
- Usar negritas y mayúsculas en exceso para compensar la falta de tamaño.
- Olvidar el interlineado y documentar solo el tamaño.
- Aplicar el mismo criterio de contraste a todos los roles. WCAG pide 4,5:1 para texto normal y 3:1 para texto grande, y las etiquetas pequeñas son las que más fallan.
Cómo empezar mañana
Abre tu producto y haz una lista de todos los tamaños de texto que aparecen. Agrúpalos por rol: lo que es cuerpo, lo que es etiqueta, lo que es título. Si hay más de cinco, busca cuáles son casi iguales y unifícalos. Documenta cada rol con tamaño e interlineado en el sistema de diseño. Después, revisa el contraste del texto en cada rol, porque los tamaños pequeños son los que más sufren. Y si la escala forma parte de algo más amplio, la guía de estilo es el lugar para registrar las decisiones.