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.1 Las 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.2 Dó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.1 La 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.2 Saltos 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.1 Escala mayor#

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

3.2 Escala 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.1 Mayor#

5.2 Menor#

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.1 La 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.2 Ejemplos#

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.3 Có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.1 A 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.2 Dos 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.3 Una 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.

Purpose#

I created my own size scale, and it's one of the foundations of how I design. I use it for every size in an interface, not just typography: text and its line height, spacing, radii, icons, control heights, cards and the large blocks of a page all come from the same scale, from 4 to over 1,000 pixels. And since screens change size, the scale also sets the minimums and maximums of fluid sizes.

The idea comes from music. The usual type scales always multiply by the same ratio, such as 1.5 or 1.333. Those two ratios come from two musical intervals: the perfect fifth (3:2) and the perfect fourth (4:3). My scale doesn't settle for a single interval. It walks through the seven degrees of the major or minor scale, and each size steps up to the next by the real distance between those two notes. When it reaches the octave, the size has doubled and the cycle starts again.

This document explains where the ratios come from, how the scale is built, how each size is named, how it's spread across the interface and what changes compared with the usual ways of choosing sizes. At the end there's a generator to compute it with another base, listen to it and copy the variables.

How to read this document#

1Always multiplying by the same#

1.1 Modular scales#

A modular scale starts from a base size and multiplies by a fixed ratio to get the next one: with a base of 16 and a ratio of 1.5 you get 16, 24, 36, 54… The best-known ratios have musical names because they come from intervals: 1.5 is the perfect fifth (3:2) and 1.333 is the perfect fourth (4:3). 1.25 (the major third, 5:4) and 1.2 (the minor third, 6:5) are also common.

1.2 Where they fall short#

With a single ratio, the scale has a single rhythm. That brings three problems:

• Too few sizes, or sizes too alike. Between 4 and 64 px, multiplying by 1.5 gives only seven sizes: 4, 6, 9, 13.5, 20.25, 30.4 and 45.6. Multiplying by 1.333 gives ten: 4; 5.3; 7.1; 9.5; 12.6; 16.9; 22.5; 30; 40 and 53.3. The larger the ratio, the fewer sizes; the smaller, the more alike they get.

• It leaves the grid From the third or fourth step on, sizes stop being round numbers and no longer land on the multiples of 4 and 8 used to lay out spacing. You need a second scale for spacing, and another for widths.

• It never gets back to double. No simple fixed ratio lands exactly on the octave: with 1.125, six steps give 2.03, not 2. The only ones that do are roots of 2, such as 1.1225, and they give decimals at every step.

2What music does#

2.1 The octave and the seven degrees#

In music, a note and its octave sound like "the same note", only higher, because the octave's frequency is exactly double. Between the two, the major and minor scales place seven degrees, from I to VII. Each degree has a ratio to the base note: the fifth, for example, vibrates 3/2 times faster.

2.2 Uneven steps#

The seven steps between one degree and the next are not equal: there are whole tones, larger, and semitones, smaller. That irregularity gives each scale its character, and it's what my system builds on:

• The scale moves in steps of different sizes. There are sizes close to each other where fine-tuning is needed and wider jumps where contrast is needed.
• After the seven steps, the size has exactly doubled, and the cycle starts again from degree I. With a base of 4, the octaves land on 4, 8, 16, 32, 64, 128, 256, 512 and 1,024: the 4 px grid sits inside the scale, from the smallest text to the largest blocks.
• The fifth (×1.5) and the fourth (×1.333) of modular scales are still there: they are two of the seven degrees. My scale doesn't discard them, it completes them.

3The ratio of each degree#

3.1 Major scale#

The major pattern is tone, tone, semitone, tone, tone, tone, semitone.

3.2 Minor scale#

This is the natural minor. It shares the tonic, second, fourth and fifth with the major, and lowers the third, sixth and seventh.

The minor pattern is tone, semitone, tone, tone, semitone, tone, tone.

4Why just intonation#

There are two ways to set the ratios. Just intonation uses fractions of small whole numbers (3/2, 5/4…), the ones that come from the physics of sound. Equal temperament, the tuning of the modern piano, splits the octave into twelve equal semitones of 2^(1/12) ≈ 1.0595, and the ratios stop being fractions: the tempered fifth is 1.4983 and the major third, 1.2599.

For a size scale, just intonation is better. With simple fractions, a base of 4 gives whole numbers or a short decimal: with a base of 16, the fifth is 24 rather than 23.97, and the major third is 20 rather than 20.16. Equal temperament only makes sense if you want to move the scale to any key, which an interface doesn't need.

5The sizes with a 4 px base#

5.1 Major#

5.2 Minor#

Between 4 and 1,024 px, each scale gives 57 sizes: seven per octave over eight octaves, plus 1,024. In the major, 39 are whole numbers; in the minor, 24. Over the same range, multiplying by 1.5 gives 14 sizes and by 1.333, 20.

6How each size is named#

Each size is named by the tonic of its octave and its degree: 16-5 is the fifth of the 16 octave, that is, 24 px. As a CSS variable: --size-16-5: 1.5rem, which is 24 px (see §7).

The name says where each size sits, not just how big it is. The same degree in two consecutive octaves is exactly double: 16-5 is 24 and 32-5 is 48. And degrees I and V of each octave form the most stable series in the scale: 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128…

7Pixels and rem#

Each size can be written in pixels or in rem. One rem is the text size of the document root, 16 px by default, and writing in rem makes the whole interface respect the text size each person has chosen in their browser.

With a base of 4, the scale fits rem naturally: the tonic of the 16 octave is exactly 1 rem, and every other size is a simple fraction of it.

Design talks in pixels, which read better, and in code the variables are written in rem, with their pixel value in a comment: --size-16-5: 1.5rem; /* 24px */.

8Rounding#

The exact ratios give a few decimals: thirds in degrees IV and VI of the major (5.33; 10.67; 21.33…) and tenths in the minor (4.8; 19.2; 25.6…). In large sizes they matter less: 853.33 px rounded to 853 is off by less than 0.04%. They can be used in two ways:

• Exact Browsers draw text with sub-pixel precision, so 21.33 px text looks like exactly that.

• Rounded In borders, spacing and heights, half a pixel can show up as a blurry edge, so it's better to round to the pixel or the half pixel.

The generator computes both versions.

9Text and line height#

There's a single scale for everything, so text and its line height come from it too. An example layout with the major scale and a 4 px base:

In running text, the line height is the fifth of its size: 12 → 18, 16 → 24, 20 → 30. In titles the interval is shorter, a third (30 → 36 is ×6/5 and 48 → 60 is ×5/4), because large lines need less air between them.

10Spacing, radii, icons and controls#

Every size in the interface comes from the scale. An example layout with the major scale and a 4 px base:

The main spacing values are the tonics and dominants (degrees I and V): the familiar 4 and 8 px grid. The other degrees give the in-between steps when a space needs fine-tuning, without making up a number that isn't in the scale.

11Cards and large blocks#

The scale keeps rising with the same pattern above 100 pixels, so it also gives the widths and heights of large pieces. An example layout:

Since every size is a simple ratio of the others, the pieces fit together: three 288 columns (256-2) with two 48 gaps fill the 960 container exactly. And the proportions are intervals too: a 384 × 192 card is an octave (2:1) and a 384 × 256 image, a fifth (3:2).

12Fluid sizes with clamp()#

12.1 The scale sets the ends#

A fixed size works for one screen; on the web, the same title has to look right on a phone and on a monitor. For that I use CSS clamp(), which grows a size with the screen width between a minimum and a maximum: clamp(minimum, preferred, maximum).

The rule is that the minimum and the maximum are always two sizes from the scale. What changes with the screen is the path between them, never the ends. And the screen widths it grows between come from the scale too: from 384 px (256-5) to 1,280 px (1024-3).

I use clamp() this way throughout my process, and it is one of the reasons my design holds its quality: it keeps its proportions on any screen. On a phone and on a monitor, each size starts and ends on a note of the scale, and the relationships between text, spacing and pieces hold while the screen changes.

12.2 Examples#

The step between the minimum and the maximum is an interval too, chosen by how much each thing should grow: running text barely changes (a tone), titles grow a fifth and large spaces, an octave.

12.3 How it's calculated#

The preferred value is a straight line that passes through the minimum on the narrowest screen and the maximum on the widest. With a minimum a, a maximum b and screens from 384 to 1,280 px:

• slope = (b − a) ÷ (1,280 − 384), written in CSS as slope × 100 vw;
• starting point = a − slope × 384, written in rem so it respects the text size each person has chosen.

The generator works it out: you choose how many degrees each size rises and it exports every clamp().

13Major or minor#

The two scales share four degrees (I, II, IV and V), so the most used sizes (4, 6, 8, 12, 16, 24, 32, 48…) are the same in both. The third, sixth and seventh change, and in the minor they sit a little lower:

The major gives more whole numbers (39 out of 57, against 24). The minor brings the third closer to the second and the sixth closer to the fifth, with tighter steps in the in-between sizes. Choosing one or the other changes the character of those sizes without touching the structure.

14Three ways to choose sizes#

14.1 By eye#

It's the most common approach when there's no system: each size is picked on the spot and nudged until it "looks right". A typical card ends up with 15 text, a 22 title, 22 padding, a 10 radius, a 42 button and a 370 width. Each number makes sense on its own, but there's no relationship between them: nobody can work out the next one, and every new screen adds different numbers.

14.2 Two scales that don't talk#

It's what many design systems do: a modular scale for text (for example ×1.25: 12.8, 16, 20, 25, 31.25…) and a linear 8-by-8 grid for spacing (8, 16, 24, 32, 40…). Each scale is consistent with itself, but not with the other: a 25 title with its 37.5 line height doesn't land on the grid, and the widths of large pieces fall outside both.

14.3 A single musical scale#

With my scale, text, spacing, radii, controls and widths come from the same series. Every size is a simple ratio of the others, and the octaves land on the 4 px grid. The example card ends up with 16 text on 24, a 24 title on 30, 24 padding, a 16 radius, a 40 button and a 384 width: every number belongs to the same scale.

15What changes#

• You decide once You don't pick a number every time: you pick a degree, and the scale already says how big it is.

• One language for design and engineering. 16-5 means the same in the design and in the code, and works the same for text as for spacing.

• Proportions repeat Line heights, margins and widths keep the same ratios (3:2, 5:4, 2:1) across every size on the page, which is why the whole feels ordered even if nobody knows why.

• It grows without breaking A new piece doesn't bring new numbers: it uses the degrees that already exist. Changing the base or switching from major to minor moves everything at once and keeps the relationships.

The interactive in this part shows the same card with the three systems and places each measurement on the scale: with the first two, many sizes fall between the notes; with the musical scale, they all land on one.

16How to use it#

The generator in this part computes the scale with any base:

1. Base: the size of the first tonic (4 px by default).
2. Scale: major or minor.
3. Range: up to which octave it goes.
4. Rounding: exact, to the half pixel or to the pixel.
5. Fluid: whether each size grows with the screen and how many degrees it rises (a tone, a third, a fifth or an octave), with the minimum and maximum screen widths.
6. Prefix: the variable name (size by default).

You can listen to every size. The tonic of the third octave (16 px with a base of 4) sounds as middle C, at 261.63 Hz, and every other size keeps its ratio to it: what you hear is the scale you see. Very small or very large sizes play one or more octaves closer to the middle, so they can be heard comfortably. Below are the variables ready to copy, as CSS (in rem, with the pixels in a comment, or with their clamp() if you chose fluid) or as JSON.

17Glossary#

• Base: the size of the first tonic. Every other size comes from multiplying it.
• Degree: each of the seven notes of the scale, from I to VII.
• Tonic: degree I, the one that names each octave.
• Dominant: degree V, 3/2 (×1.5) above the tonic.
• Subdominant: degree IV, 4/3 (×1.333) above the tonic.
• Octave: the step that doubles the size (×2).
• Major tone, minor tone and semitone: the three steps of just intonation: ×9/8, ×10/9 and ×16/15.
• Just intonation: ratios of small whole numbers.
• Equal temperament: twelve equal semitones of 2^(1/12); the tuning of the modern piano.
• Modular scale: one that always multiplies by the same ratio.
• rem: the text size of the document root (16 px by default); the unit the variables are written in.
• clamp(): the CSS function that grows a size with the screen between a minimum and a maximum. In this scale, both ends are degrees.
• Linear grid: one that always adds the same amount, such as 8 by 8.