También disponible en: English · Português · Français · العربية
Generador de escala modular tipográfica
Una escala tipográfica desde cualquier base y proporción, con la proporción real impresa junto a cada paso para ver qué te costó el redondeo.
¿Qué es una escala modular?
Una escala modular es un conjunto de tamaños de letra construido multiplicando repetidamente un tamaño base por una proporción fija. Empieza en 18px con una proporción de 1,25 y obtienes 22,5, 28,125 y 35,15625 hacia arriba, y 14,4 y 11,52 hacia abajo. El atractivo es la coherencia: cada par contiguo guarda la misma relación, así que los tamaños parecen un sistema y no una lista de números que le gustaron a alguien.
Las proporciones tienen nombre porque están tomadas de la música. La tercera mayor, la cuarta justa, la quinta justa y la octava son intervalos en entonación justa, y en ese sistema son fracciones exactas: 5/4, 4/3, 3/2 y 2. Conviene saberlo porque todas las tablas publicadas de proporciones las muestran como decimales, y esos decimales están redondeados.
Este generador de escala modular hace el trabajo corriente y además lo que no hace ningún otro: junto a cada paso imprime la proporción que ese paso ha conseguido realmente, y te dice cuántos siguen coincidiendo con la que pediste. Normalmente la mayoría no coincide.
Cómo usarlo
- Fija el tamaño base y elige una proporción. Trae nueve intervalos con nombre, o elige Otra y escribe la tuya. La línea bajo el selector te dice qué fracción exacta es realmente el intervalo, y el decimal redondeado que suelen imprimir las tablas.
- Elige cuántos pasos necesitas por encima y por debajo de la base. Los pasos negativos son los tamaños pequeños —pies de foto, etiquetas— y los positivos son los titulares.
- Mira la última columna y luego desmarca la casilla del redondeo. Esa columna es la proporción que cada paso guarda de verdad con el de debajo. Con el redondeo activado casi todos se desvían; sin él, todos son exactos. El resumen de abajo los cuenta, y el bloque de CSS te da propiedades personalizadas listas para pegar.
Redondear a píxeles enteros rompe la escala
Una progresión geométrica no sobrevive al redondeo. Toma el ejemplo por defecto de esta página: una tercera mayor desde una base de 18px. Redondeados a píxeles enteros los tamaños son 12, 14, 18, 23, 28, 35, 44, 55 y 69, y solo dos de esos ocho pasos siguen guardando una relación de 1,25 con el anterior. El primer par, de 12 a 14, da 1,1667: está un 6,67 % lejos de la proporción por la que se eligió la escala, y es el texto más grande de la página junto al más pequeño.
No es una rareza de un ajuste concreto. En las nueve proporciones de esta página con los dos tamaños base más habituales, 16 y 18 píxeles, solo 39 de 144 pares contiguos conservan su proporción prometida —un 27,1 %— y el peor par se desvía un 10 %. Es decir, la propiedad que hace que merezca la pena usar una escala modular está, en el caso corriente, ausente casi por completo de los números que llegan a la hoja de estilos.
El infractor más sorprendente es la octava. Duplicar es la proporción más simple que existe y el redondeo no puede romperla, porque el doble de un número entero es un número entero. Pero redondear antes de duplicar sí puede: desde una base de 18px, el paso dos por debajo es 4,5, que redondea a 5, y 5 duplicado da 10 en vez del 9 que quiere la escala. Es un fallo del 10 % en la proporción más simple de la tabla, y es el mayor desvío de toda ella. Desde una base de 16px esa misma octava es perfecta en todos los pasos, porque 16 se divide limpiamente hasta abajo. Lo decide la paridad de la base, y por eso la base es el primer control de la página.
La solución no es elegir otra proporción, sino dejar de redondear: a CSS no le molesta 1,3333rem ni 22,5px, y la columna rem de aquí es exacta lo esté o no la de píxeles. Desmarca la casilla del redondeo y el contador se pone en ocho de ocho con un desvío máximo de cero.
Las proporciones publicadas también están redondeadas
Hay un segundo redondeo, más pequeño, debajo del primero, y está en casi todas las tablas de proporciones de la web. Una cuarta justa se escribe 1,333. No es 1,333: es 4/3, o sea 1,3333 periódico. Una tercera menor es 6/5, una tercera mayor 5/4, una quinta justa 3/2 y una segunda mayor 9/8. Eso es exacto; los decimales publicados a su lado no lo son.
La diferencia de tamaño es pequeña: en el sexto paso por encima de una base de 16px, usar 1,333 en vez de 4/3 te cuesta menos de un píxel entero. Pero el error va siempre en la misma dirección, porque 1,333 queda por debajo de 4/3 y no a un lado y otro, así que se acumula en vez de cancelarse. Y tiene una consecuencia que no es pequeña en absoluto: con la fracción exacta, tres de los pares redondeados con una base de 16px caen justo en la proporción, porque 4/3 es una razón de números enteros pequeños y pares como 12 y 16 la cumplen. Con 1,333 no puede ser exacto ni un solo par, porque 1,333 no es la razón de ningún par de enteros pequeños.
Dos de las nueve sí son irracionales y ningún decimal será nunca exacto para ellas. La cuarta aumentada es la raíz cuadrada de dos, y la proporción áurea es uno más la raíz de cinco, todo dividido entre dos. Esta página usa el valor exacto en las nueve y te dice bajo el selector con cuál de los dos tipos estás trabajando.
Límites declarados
Nada de esto significa que una escala redondeada no sirva. Los tamaños de letra son una decisión de diseño, no una medición, y 23px en vez de 22,5px no le hace daño a nadie. La afirmación de aquí es más estrecha y conviene precisarla: en cuanto redondeas, lo que tienes ya no es una escala modular, sino una lista de tamaños que empezó siéndolo. Si la proporción era tu motivo para elegir este método, deberías saber cuándo has dejado de tenerla.
El contador compara cada par con la proporción que pediste y solo lo llama exacto cuando coinciden hasta una fracción de una billonésima. Es deliberadamente estricto, porque cualquier margen mayor colaría los casi aciertos como aciertos y la columna no tendría sentido.
Los navegadores añaden un redondeo más que esta página no puede enseñarte. Un tamaño en rem se calcula de forma exacta, pero los glifos acaban dibujándose sobre una rejilla de píxeles del dispositivo, y cómo se resuelve eso depende del navegador, del sistema y de la pantalla. Así que la columna rem es exacta como valor calculado y aproximada como tinta. Aun así es mejor que redondear tú, porque el navegador redondea en el último momento posible y no en el primero.
Por último, la escala no dice nada sobre qué tamaños deberías usar de verdad. Un generador te dará nueve pasos encantado; la mayoría de las interfaces necesitan cuatro o cinco, y los que te saltas importan tanto como los que conservas.
¿Por qué es gratis?
Es aritmética y corre en tu navegador. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado tu escala.