Mi escala de tamaños, construida como una escala musical

Propósito#

He creado una escala de tamaños propia y es una de las bases de cómo diseño. La uso para todos los tamaños de una interfaz, no solo para la tipografía: el texto y su interlineado, los espacios, los radios, los iconos, la altura de los controles, las tarjetas y los bloques grandes de una página salen de la misma escala, desde 4 hasta más de 1.000 píxeles. Y como las pantallas cambian de tamaño, la escala también marca los mínimos y los máximos de los tamaños fluidos.

La idea parte de la música. Las escalas tipográficas habituales multiplican siempre por la misma razón, como 1,5 o 1,333. Esas dos razones vienen de dos intervalos musicales: la quinta justa (3:2) y la cuarta justa (4:3). Mi escala no se queda con un solo intervalo. Recorre los siete grados de la escala mayor o de la menor, y cada tamaño sube al siguiente con la distancia real que hay entre esas dos notas. Al llegar a la octava, el tamaño se ha duplicado y el ciclo vuelve a empezar.

Este documento explica de dónde salen las razones, cómo se construye la escala, cómo se nombra cada tamaño, cómo se reparte por la interfaz y qué cambia frente a las formas habituales de elegir tamaños. Al final hay un generador para calcularla con otra base, oírla y copiar las variables.

Cómo leer este documento#

1Multiplicar siempre por lo mismo#

1.1Las escalas modulares#

Una escala modular parte de un tamaño base y multiplica por una razón fija para obtener el siguiente: con base 16 y razón 1,5 salen 16, 24, 36, 54… Las razones más conocidas tienen nombre musical porque vienen de los intervalos: 1,5 es la quinta justa (3:2) y 1,333 es la cuarta justa (4:3). También se usan 1,25 (la tercera mayor, 5:4) y 1,2 (la tercera menor, 6:5).

1.2Dónde se quedan cortas#

Con una sola razón, la escala tiene un único ritmo. Eso trae tres problemas:

• Pocos tamaños o tamaños demasiado parecidos. Entre 4 y 64 px, multiplicar por 1,5 da solo siete tamaños: 4, 6, 9, 13,5, 20,25, 30,4 y 45,6. Por 1,333 salen diez: 4; 5,3; 7,1; 9,5; 12,6; 16,9; 22,5; 30; 40 y 53,3. Cuanto mayor es la razón, menos tamaños hay; cuanto menor, más se parecen entre sí.
• Se sale de la rejilla A partir del tercer o cuarto paso, los tamaños dejan de ser números redondos y ya no caen en los múltiplos de 4 y de 8 con los que se maquetan los espacios. Hace falta una segunda escala para el espaciado, y otra para las anchuras.
• Nunca vuelve al doble Ninguna razón fija sencilla cae exactamente en la octava: con 1,125, seis pasos dan 2,03 y no 2. Las únicas que lo hacen son raíces de 2, como 1,1225, y dan decimales en todos los pasos.

2Lo que hace la música#

2.1La octava y los siete grados#

En música, una nota y su octava suenan como «la misma nota», solo que más aguda, porque la frecuencia de la octava es exactamente el doble. Entre las dos, la escala mayor y la menor colocan siete grados, del I al VII. Cada grado tiene una razón con la nota base: la quinta, por ejemplo, vibra 3/2 veces más rápido.

2.2Saltos desiguales#

Los siete saltos entre un grado y el siguiente no son iguales: hay tonos, más grandes, y semitonos, más pequeños. Esa irregularidad da carácter a cada escala, y es lo que aprovecha mi sistema:

• La escala avanza con pasos de distinto tamaño. Hay tamaños cercanos entre sí donde hace falta afinar y saltos más amplios donde hace falta contraste.
• Al completar los siete saltos, el tamaño se ha duplicado exactamente, y el ciclo vuelve a empezar por el grado I. Con base 4, las octavas caen en 4, 8, 16, 32, 64, 128, 256, 512 y 1.024: la rejilla de 4 px queda dentro de la escala, de los textos más pequeños a los bloques más grandes.
• La quinta (×1,5) y la cuarta (×1,333) de las escalas modulares siguen ahí: son dos de los siete grados. Mi escala no las descarta, las completa.

3Las razones de cada grado#

3.1Escala mayor#

El patrón de la mayor es tono, tono, semitono, tono, tono, tono, semitono.

3.2Escala menor#

Es la menor natural. Comparte con la mayor la tónica, la segunda, la cuarta y la quinta, y baja la tercera, la sexta y la séptima.

El patrón de la menor es tono, semitono, tono, tono, semitono, tono, tono.

4Por qué afinación justa#

Hay dos formas de fijar las razones. La afinación justa usa fracciones de números enteros pequeños (3/2, 5/4…), las que salen de la física del sonido. La afinación temperada, la del piano moderno, divide la octava en doce semitonos iguales de 2^(1/12) ≈ 1,0595, y las razones dejan de ser fracciones: la quinta temperada es 1,4983 y la tercera mayor, 1,2599.

Para una escala de tamaños, la justa es mejor. Con fracciones sencillas, una base de 4 da números enteros o con un decimal corto: con base 16, la quinta es 24 y no 23,97, y la tercera mayor es 20 y no 20,16. La temperada solo tiene sentido si se quiere llevar la escala a cualquier tonalidad, algo que una interfaz no necesita.

5Los tamaños con base 4 px#

5.1Mayor#

5.2Menor#

Entre 4 y 1.024 px, cada escala da 57 tamaños: siete por octava en ocho octavas, más el 1.024. En la mayor, 39 son números enteros; en la menor, 24. En el mismo tramo, multiplicar por 1,5 da 14 tamaños y por 1,333, 20.

6Cómo se nombra cada tamaño#

Cada tamaño se nombra con la tónica de su octava y su grado: 16-5 es la quinta de la octava de 16, es decir, 24 px. Como variable CSS: --escala-16-5: 1.5rem, que son 24 px (ver §7).

El nombre dice dónde está cada tamaño, no solo cuánto mide. El mismo grado en dos octavas seguidas es exactamente el doble: 16-5 mide 24 y 32-5, 48. Y los grados I y V de cada octava forman la serie más estable de la escala: 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128…

7Píxeles y rem#

Cada tamaño se puede escribir en píxeles o en rem. Un rem es el tamaño de letra de la raíz del documento, 16 px por defecto, y escribir en rem hace que toda la interfaz respete el tamaño de letra que cada persona ha elegido en su navegador.

Con base 4, la escala encaja de forma natural con el rem: la tónica de la octava de 16 es exactamente 1 rem, y todos los demás tamaños son una fracción sencilla de él.

En el diseño se habla en píxeles, que se leen mejor, y en el código las variables se escriben en rem, con su valor en píxeles en un comentario: --escala-16-5: 1.5rem; /* 24px */.

8El redondeo#

Las razones exactas dan algunos decimales: tercios en los grados IV y VI de la mayor (5,33; 10,67; 21,33…) y décimas en la menor (4,8; 19,2; 25,6…). En los tamaños grandes pesan menos: 853,33 px redondeado a 853 se desvía menos de un 0,04 %. Se pueden usar de dos formas:

• Exactos Los navegadores dibujan las letras con precisión de subpíxel, así que un texto de 21,33 px se ve como lo que es.
• Redondeados En bordes, espacios y alturas, medio píxel puede verse como un borde borroso, y es mejor redondear al píxel o al medio píxel.

El generador calcula las dos versiones.

9Texto e interlineado#

La escala es una sola para todo, así que el texto y su interlineado también salen de ella. Un ejemplo de reparto con la escala mayor y base 4:

En el texto corrido, el interlineado es la quinta de su tamaño: 12 → 18, 16 → 24, 20 → 30. En los títulos el intervalo es más corto, una tercera (30 → 36 es ×6/5 y 48 → 60 es ×5/4), porque las líneas grandes necesitan menos aire entre sí.

10Espacios, radios, iconos y controles#

Todo tamaño de la interfaz sale de la escala. Un ejemplo de reparto con la mayor y base 4:

Los espacios principales son las tónicas y las dominantes (grados I y V): la rejilla de 4 y 8 px de siempre. Los demás grados dan los pasos intermedios cuando un espacio necesita afinarse, sin inventar un número que no esté en la escala.

11Tarjetas y bloques grandes#

La escala sigue subiendo con el mismo patrón por encima de los 100 píxeles, así que también da las anchuras y las alturas de las piezas grandes. Un ejemplo de reparto:

Como cada tamaño es una razón sencilla de los demás, las piezas encajan entre sí: tres columnas de 288 (256-2) con dos huecos de 48 llenan exactamente los 960 del contenedor. Y las proporciones también son intervalos: una tarjeta de 384 × 192 es una octava (2:1) y una imagen de 384 × 256, una quinta (3:2).

12Tamaños fluidos con clamp()#

12.1La escala marca los extremos#

Un tamaño fijo vale para una pantalla; en una web, el mismo título tiene que verse bien en un móvil y en un monitor. Para eso uso clamp() de CSS, que hace crecer un tamaño con el ancho de la pantalla entre un mínimo y un máximo: clamp(mínimo, preferido, máximo).

La regla es que el mínimo y el máximo son siempre dos tamaños de la escala. Lo que cambia con la pantalla es el recorrido entre ellos, nunca los extremos. Y los anchos de pantalla entre los que crece también salen de la escala: de 384 px (256-5) a 1.280 px (1024-3).

Uso clamp() así en todo mi proceso, y es una de las razones por las que mi diseño es de calidad: mantiene sus proporciones en cualquier pantalla. En un móvil y en un monitor, cada tamaño empieza y termina en una nota de la escala, y las relaciones entre el texto, los espacios y las piezas se conservan mientras la pantalla cambia.

12.2Ejemplos#

El salto entre el mínimo y el máximo también es un intervalo, y se elige según cuánto debe crecer cada cosa: el texto corrido apenas cambia (un tono), los títulos crecen una quinta y los espacios grandes, una octava.

12.3Cómo se calcula#

El valor preferido es una recta que pasa por el mínimo en la pantalla más estrecha y por el máximo en la más ancha. Con un mínimo a, un máximo b y pantallas de 384 a 1.280 px:

• pendiente = (b − a) ÷ (1.280 − 384), que en CSS se escribe como pendiente × 100 vw;
• punto de partida = a − pendiente × 384, que se escribe en rem para que respete el tamaño de letra que haya elegido cada persona.

El generador lo calcula solo: se elige cuántos grados sube cada tamaño y exporta todos los clamp().

13Mayor o menor#

Las dos escalas comparten cuatro grados (I, II, IV y V), así que los tamaños más usados (4, 6, 8, 12, 16, 24, 32, 48…) son iguales en las dos. Cambian la tercera, la sexta y la séptima, que en la menor quedan un poco más bajas:

La mayor da más números enteros (39 de 57, frente a 24). La menor acerca la tercera a la segunda y la sexta a la quinta, con saltos más contenidos en los tamaños intermedios. Elegir una u otra cambia el carácter de esos tamaños sin tocar la estructura.

14Tres formas de elegir tamaños#

14.1A ojo#

Es lo más común cuando no hay sistema: cada tamaño se elige en su momento y se ajusta hasta que «queda bien». Una tarjeta típica acaba con un texto de 15, un título de 22, un relleno de 22, un radio de 10, un botón de 42 y una anchura de 370. Cada número tiene sentido por separado, pero no hay ninguna relación entre ellos: nadie puede deducir el siguiente, y cada pantalla nueva añade números distintos.

14.2Dos escalas que no se hablan#

Es lo que hacen muchos sistemas de diseño: una escala modular para el texto (por ejemplo, ×1,25: 12,8, 16, 20, 25, 31,25…) y una rejilla lineal de 8 en 8 para los espacios (8, 16, 24, 32, 40…). Cada escala es coherente consigo misma, pero no con la otra: un título de 25 con su interlineado de 37,5 no cae en la rejilla, y las anchuras de las piezas grandes quedan fuera de las dos.

14.3Una sola escala musical#

Con mi escala, el texto, los espacios, los radios, los controles y las anchuras salen de la misma serie. Todos los tamaños son razones sencillas entre sí, y las octavas caen en la rejilla de 4 px. La tarjeta del ejemplo queda con un texto de 16 sobre 24, un título de 24 sobre 30, un relleno de 24, un radio de 16, un botón de 40 y una anchura de 384: todos los números pertenecen a la misma escala.

15Lo que cambia#

• Se decide una vez No hay que elegir un número cada vez: se elige un grado, y la escala ya dice cuánto mide.
• Un solo idioma para diseño y desarrollo. 16-5 significa lo mismo en el diseño y en el código, y vale igual para un texto que para un espacio.
• Las proporciones se repiten. Interlineados, márgenes y anchuras guardan las mismas razones (3:2, 5:4, 2:1) en todos los tamaños de la página, y por eso el conjunto se percibe ordenado aunque nadie sepa por qué.
• Crece sin romperse Una pieza nueva no trae números nuevos: usa los grados que ya existen. Cambiar la base o pasar de mayor a menor mueve todo a la vez y mantiene las relaciones.

El interactivo de esta parte enseña la misma tarjeta con los tres sistemas y coloca cada medida sobre la escala: con los dos primeros, muchos tamaños caen entre las notas; con la escala musical, todos caen en una.

16Cómo usarlo#

El generador de esta parte calcula la escala con cualquier base:

1. Base: el tamaño de la primera tónica (4 px por defecto).
2. Escala: mayor o menor.
3. Rango: hasta qué octava llega.
4. Redondeo: exacto, al medio píxel o al píxel.
5. Fluido: si cada tamaño crece con la pantalla y cuántos grados sube (un tono, una tercera, una quinta o una octava), con el ancho de pantalla mínimo y máximo.
6. Prefijo: el nombre de las variables (escala por defecto).

Cada tamaño se puede oír. La tónica de la tercera octava (16 px con base 4) suena como el do central, a 261,63 Hz, y el resto conserva su razón con ella: lo que suena es la escala que se ve. Los tamaños muy pequeños o muy grandes suenan una o varias octavas más cerca del centro, para que se oigan bien. Debajo están las variables listas para copiar, en CSS (en rem, con los píxeles en un comentario, o con sus clamp() si se ha elegido fluido) o en JSON.

17Glosario#

• Base: el tamaño de la primera tónica. Todos los demás salen de multiplicarla.
• Grado: cada una de las siete notas de la escala, del I al VII.
• Tónica: el grado I, el que da nombre a cada octava.
• Dominante: el grado V, a 3/2 (×1,5) de la tónica.
• Subdominante: el grado IV, a 4/3 (×1,333) de la tónica.
• Octava: el salto que duplica el tamaño (×2).
• Tono mayor, tono menor y semitono: los tres saltos de la afinación justa: ×9/8, ×10/9 y ×16/15.
• Afinación justa: razones de números enteros pequeños.
• Afinación temperada: doce semitonos iguales de 2^(1/12); la del piano moderno.
• Escala modular: la que multiplica siempre por la misma razón.
• rem: el tamaño de letra de la raíz del documento (16 px por defecto); la unidad en la que se escriben las variables.
• clamp(): la función de CSS que hace crecer un tamaño con la pantalla entre un mínimo y un máximo. En esta escala, los dos extremos son grados.
• Rejilla lineal: la que suma siempre la misma cantidad, como de 8 en 8.