¿Qué es una escala tipográfica modular?

Una escala tipográfica modular —a menudo abreviada simplemente como escala modular— es un conjunto pequeño y fijo de tamaños de fuente donde cada tamaño se deriva de un tamaño base multiplicado por una razón constante. En lugar de elegir los tamaños a ojo, tomas dos decisiones —una base (normalmente 16px) y una razón (por ejemplo 1,333)— y una fórmula genera todos los demás tamaños. El resultado es un sistema tipográfico donde los tamaños se relacionan entre sí de forma matemática en lugar de accidental.

Muchos sistemas de diseño modernos organizan su tipografía en torno a algún tipo de escala, y la escala modular es la forma más común. La idea tiene raíces profundas en la tipografía impresa y llegó a la práctica web en buena medida a través del ensayo de Tim Brown More Meaningful Typography en A List Apart. Es uno de los primeros fundamentos que vale la pena definir, junto con el espaciado. Este artículo forma parte de nuestra guía de escala tipográfica.

¿Cómo funciona la fórmula de la escala tipográfica?

La fórmula clásica es:

size(i) = base × ratio^i

donde i es el número de paso: los pasos positivos suben desde la base, los negativos bajan. Con una base de 16px y una razón de 1,333 (una «cuarta justa»), la escala tiene este aspecto:

Hay una consecuencia fácil de pasar por alto en la tabla: cada salto entre niveles es proporcionalmente el mismo. Un h2 se relaciona con un h3 mediante la misma razón con la que un h3 se relaciona con el texto de cuerpo (en la práctica los tamaños se redondean, pero la relación se mantiene).

Esa consistencia proporcional es lo que hace que una página se sienta compuesta en lugar de ensamblada. Las personas son sorprendentemente buenas percibiendo la proporción aunque no sepan nombrarla: la misma facultad que oye cuando un acorde está desafinado. Una escala consistente también reduce el ruido visual de la página: cuando cada relación de tamaños es una instancia de una única razón, el ojo tiene una sola regla que conciliar en lugar de una docena de reglas arbitrarias.

¿Cómo se elige una razón?

La razón controla cómo de drásticos son los saltos de tamaño, y el valor correcto depende de cuán denso en texto sea tu producto:

• 1,125–1,25 (segunda mayor a tercera mayor): pasos sutiles. Ideal para UI de producto densa —paneles, tablas, pantallas de ajustes— donde necesitas muchos tamaños utilizables muy próximos entre sí.
• 1,333–1,414 (cuarta justa a cuarta aumentada): jerarquía clara sin dramatismo. El rango caballo de batalla para sitios de marketing y páginas de contenido.
• 1,5–1,618 (quinta justa a proporción áurea): saltos grandes y expresivos. Funciona para diseños editoriales y landing pages con poco texto; un desperdicio para UI, porque los pasos superiores se vuelven enormes muy rápido.

Una regla práctica útil: cuanto más texto lleve tu interfaz, menor debe ser tu razón.

¿Qué son las «notas» y por qué las razones simples se quedan cortas?

Este es el problema con el que se topa todo equipo al usar la fórmula pura: los huecos son demasiado grandes justo donde necesitas precisión. Con base 16 y razón 1,333, no hay nada entre 16px y 21px, pero las interfaces reales necesitan constantemente un tamaño de 18px (un párrafo de entrada, la etiqueta de un botón grande).

Una analogía útil viene de la música. Una octava no salta de un do al siguiente: se divide en notas. Una escala tipográfica se puede subdividir de la misma manera:

size(i) = base × ratio^(i/notes)

Con notes = 2, cada salto de razón obtiene un paso intermedio: 16, 18, 21, 25, 28… Los tamaños intermedios siguen viviendo sobre la escala —son semipasos, no excepciones—, así que la consistencia proporcional se conserva mientras la escala se vuelve lo bastante densa como para usarla de verdad.

Míralo en vivo: abre esta misma escala en Scale Composer: cuarta justa, base de 16px, 2 notas por intervalo. Arrastra la razón y observa cómo se recalcula cada nivel.

¿Por qué una escala es mejor que elegir los tamaños a mano?

Cuatro motivos prácticos:

1. Menos decisiones. Todo debate del tipo «¿esto debería ser 17 o 18px?» desaparece: si no está en la escala, no es un tamaño.
2. Protección contra la deriva. Los sistemas elegidos a mano acumulan tamaños. Audita cualquier base de código madura y probablemente encontrarás 14, 15, 16, 17 y 18px todos en producción, haciendo el mismo trabajo. Una escala hace que ese tipo de entropía sea mucho más difícil de introducir.
3. Tokens que se pueden nombrar. Un conjunto finito de tamaños se corresponde limpiamente con design tokens de tipografía (heading-lg, body-md) que el diseño y el código pueden compartir, y se necesitan menos tamaños de los que la mayoría de los equipos esperan.
4. Una progresión compartida. La misma base y la misma razón pueden gobernar algo más que la tipografía: lo más común son los pasos de espaciado, y algunos sistemas incluso usan la misma progresión al generar rampas de color, de modo que cambiar un solo número reajusta el sistema de forma consistente.

¿Dónde encaja el interlineado?

Una escala de tamaños resuelve la mitad de la tipografía; la otra mitad es vertical. Una convención común es derivar una unidad de línea base igual a la mitad del tamaño base (8px con una base de 16px) y fijar cada interlineado como un múltiplo entero o medio de ella: cuerpo de 16px sobre una línea de 24px (3 líneas base), h2 de 38px sobre 48px (6 líneas base). Así el texto se asienta sobre un ritmo compartido en lugar de valores arbitrarios por elemento, el mismo ritmo sobre el que puede construir el sistema de espaciado.

Pruébalo con tus propios números

La forma más rápida de entender una escala modular es romper una: abre la misma escala con cuatro notas por intervalo y observa cómo la escala se vuelve más densa sin perder sus proporciones; luego vuelve a ponerla en dos, sube la razón a 1,5 y comprueba exactamente cuándo los pasos superiores dejan de ser utilizables. Tu tamaño de cuerpo y tu momento de UI más denso te dirán tu razón más rápido que cualquier tabla.