7 errores de escala tipográfica que rompen un sistema de diseño

Audita los tamaños de fuente de un producto de dos años y rara vez encontrarás los seis tamaños que promete la documentación del sistema de diseño. Encontrarás una veintena: los seis, más 15px «para la barra lateral», 17px «porque 16 se veía pequeño en esa tarjeta», 30px «bastante cerca de 28» — cada uno enviado por una persona razonable resolviendo un problema local.

La mayoría de los errores de escala tipográfica comparten un mismo mecanismo: la escala deja de ser la fuente de la que realmente se derivan los tamaños, los interlineados y el espaciado, y se convierte en documentación de la que la producción se desvía silenciosamente. Los siete que siguen son las rutas comunes hacia ese estado — cada uno nombrado como el fallo que puedes observar, luego el mecanismo que hay detrás, y luego una solución en una frase.

Estos son errores de tipografía a nivel de sistema de diseño, no cuestiones de gusto; dan por sentado que sabes qué es una escala modular. Si aún no lo sabes, empieza con nuestra guía de escala tipográfica.

1. Se cuelan valores fuera de escala — «solo esta vez, 17px»

El fallo: el código acumula tamaños que la escala nunca generó, una excepción razonable cada vez, hasta que la escala no describe nada ni restringe a nadie — decoración en la documentación.

El mecanismo: cada excepción es racional a nivel local y corrosiva a nivel global. El primer 17px resuelve un problema real; también establece que la escala es negociable, y cada excepción siguiente es más fácil de justificar que la anterior. La escala tipográfica tradicional que la imprenta arrastró durante siglos — 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 puntos y hacia arriba — se mantuvo en parte porque estaba físicamente cerrada: los tipos eran de metal, fundidos en esos tamaños, y no había un 17pt al que recurrir. El tipo digital eliminó la restricción pero no la necesidad de ella, así que la disciplina tiene que ser explícita.

La solución: trata la escala como cerrada — cuando falte un tamaño que necesitas, cambia la escala (ajusta la ratio, subdivide un paso), nunca añadas un valor al lado.

2. La ratio es demasiado pronunciada para el producto

El fallo: el equipo se salta niveles de forma habitual — las páginas saltan de h1 a h4, y la mitad superior de la escala queda sin usar en silencio.

El mecanismo: una ratio elegida por cómo se ve en un espécimen en lugar de por la densidad de texto del producto. Compara una escala de proporción áurea con una plana, ambas sobre una base de 16px:

En un producto denso en texto, la columna de 1,618 falla casi de inmediato: no existe nada entre 16 y 26, donde vive la mayor parte del texto de interfaz, y un h1 de 110px pertenece a un cartel, no a un panel de control. Ante eso, los equipos no abandonan la jerarquía — abandonan la escala.

La solución: elige la ratio según la densidad de texto — aproximadamente 1,125–1,25 para UI densa, más pronunciada para trabajo editorial — y subdivide los intervalos cuando necesites tamaños intermedios en lugar de tolerar huecos.

3. Los tamaños siguen una escala, los interlineados se adivinan

El fallo: columnas que empiezan alineadas se separan; el espacio después de los títulos se ve distinto en cada página; los diseños se sienten ruidosos y nadie puede señalar por qué.

El mecanismo: el interlineado, no el tamaño de fuente, es lo que realmente ocupa espacio vertical. Si los tamaños son sistemáticos pero el interlineado de cada elemento es un 1,3, 1,45 improvisado, o «28px parecía correcto», la altura de cada bloque de texto es arbitraria — las relaciones verticales no pueden cuadrar porque no hay ninguna unidad en la que se cuenten.

La solución: deriva los interlineados de una unidad de línea base de la mitad de la base — 8px sobre una base de 16px — y permite solo múltiplos enteros o medios: cuerpo de 16px con una línea de 24px (tres líneas base), h2 de 38px sobre 48px (seis).

Esa disciplina de línea base es más fácil de juzgar frente a una referencia que funciona. Abre una escala coherente en Scale Composer — base 16, cuarta justa, cada interlineado ajustado a la línea base de 8px, el espaciado derivado de la misma progresión. Los cuatro errores restantes son todos visibles como desviaciones de esta imagen.

4. Los tokens se nombran según valores — y mienten tras un reajuste

El fallo: el sistema reajusta su ratio de 1,333 a 1,25, y font-24 ahora produce 21px. O, más habitualmente, nadie reajusta — porque renombrar font-24 en cientos de puntos de llamada cuesta más que convivir con la ratio equivocada.

El mecanismo: un nombre basado en valores suelda cada punto de llamada a la salida de hoy en lugar de a la función del tamaño. Los nombres por rol describen la función, y la función sobrevive a un reajuste — que es, al fin y al cabo, el propósito de generar tamaños a partir de dos parámetros.

La solución: nombra los tokens por roles (body, heading-lg), nunca por valores.

5. La tipografía sigue una escala, el espaciado no

El fallo: el texto está proporcionado pero los espacios a su alrededor se calculan a ojo — tarjetas, pilas y secciones se sienten sutilmente mal incluso donde la tipografía en sí es cuidadosa.

El mecanismo: la proporción se percibe a partir del tamaño y el espacio juntos. Cuando los tamaños de fuente siguen una ratio pero los márgenes y el relleno siguen la costumbre — 12px aquí, 20px allá — la mitad del sistema habla un idioma distinto, y el ojo tiene dos conjuntos de reglas que reconciliar en lugar de uno.

La solución: deriva los pasos de espaciado de la misma base y escala que la tipografía — en Scale Composer, los pasos de espaciado provienen de la misma progresión, así que los dos no pueden divergir.

6. Los tamaños de los títulos se eligen por página, no se derivan una vez

El fallo: el h2 es de 32px en el sitio de marketing, 28px en la documentación y 30px en la aplicación — visible en cualquier captura comparada lado a lado, invisible en cualquier revisión de una sola página.

El mecanismo: cada decisión por página es una bifurcación, y cada bifurcación es defendible en su propio contexto. Pero lo que hace de la tipografía un sistema es el reconocimiento — la sensación del lector, y la del equipo, de que esto es un solo producto — y el reconocimiento se acumula solo cuando la escalera se deriva una vez y se reutiliza en todas partes.

La solución: deriva la escalera de títulos de la escala una sola vez, y deja que las decisiones por página elijan roles, nunca valores en píxeles.

7. Todo se publica en px

El fallo: un lector aumenta el tamaño de fuente predeterminado de su navegador — un ajuste del que dependen algunos lectores con baja visión — y el sitio lo ignora por completo.

El mecanismo: px es absoluto, mientras que rem se resuelve en relación con el tamaño de fuente predeterminado del usuario (16px salvo que lo haya cambiado). El zoom de página todavía funciona sobre texto fijado en px, pero la preferencia de tamaño de fuente es un canal de accesibilidad distinto — amplía el texto sin ampliar todo el diseño — y el CSS solo-px desactiva ese canal.

La solución: expresa la escala en rem — divide cada valor en px por 16 — y deja que px viva solo en las maquetas de las herramientas de diseño.

Somete tu escala a una prueba de estrés antes de que lo haga la producción

Estos problemas de escala tipográfica comparten un rasgo más: cada uno es barato de detectar pronto y caro de deshacer después de que un centenar de páginas dependan de él. El diagnóstico más rápido es el abuso deliberado — lleva la ratio a sus extremos y observa qué niveles se rompen primero. Hacia 1,1, los pasos adyacentes colapsan en casi-duplicados que nadie puede distinguir; pasado 1,6, los tamaños de display superan cualquier contenedor realista. Ejecuta ese experimento sobre la escala de prueba de estrés en Scale Composer — los niveles que se rompen primero ahí son los que la producción habría roto por ti.