Intervalos musicales en tipografía: qué hacen las notas en una escala

Las notas subdividen cada intervalo de una escala tipográfica en pasos proporcionales iguales: la fórmula se convierte en size = base × ratio^(i/notes), y cada nota multiplica el tamaño anterior por la raíz enésima (según el número de notas) de la razón. En una escala de cuarta justa (base 16px, razón 1,333), dos notas por intervalo añaden un paso de 18px entre 16 y 21 — y como el nuevo tamaño es una potencia de la misma constante, queda sobre la escala en lugar de junto a ella.

Tanto el mecanismo como el nombre están tomados de la música, y el préstamo es inusualmente honesto: la matemática es realmente la misma. Este artículo es la inmersión profunda en ese mecanismo — de dónde viene el paralelismo, qué hace la fórmula y cuándo conviene añadir notas a una escala que ya funciona. Si primero necesitas los fundamentos, empieza por nuestra guía de escala tipográfica.

¿De dónde viene el paralelismo musical?

Una octava en música es una razón de frecuencia de 2:1 — el La por encima del La de concierto vibra el doble de rápido. El temperamento igual, el sistema de afinación que usan hoy la mayoría de los instrumentos occidentales, divide ese tramo de 2:1 en doce pasos iguales. Iguales en un sentido concreto: no iguales en hercios, sino iguales en razón. Cada semitono multiplica la frecuencia por la raíz duodécima de 2 (unos 1,0595), de modo que doce semitonos se componen hasta exactamente 2, y todo intervalo del sistema — una quinta, una cuarta, una tercera mayor — es un número entero de semitonos: 2^(k/12).

Una escala tipográfica con notas realiza la misma operación sobre una magnitud distinta. La razón de la escala hace el papel de la octava; las notas hacen el de los semitonos. Con razón 1,333 y dos notas por intervalo, cada paso multiplica el tamaño por 1.333^(1/2) ≈ 1,155, y dos pasos se componen hasta exactamente 1,333. Esto es lo que significa una escala tipográfica musical en sentido literal: tamaños espaciados de la misma forma en que el temperamento igual espacia las alturas.

Conviene ser preciso sobre la relación. Es un paralelismo matemático genuino — ambos sistemas subdividen una razón geométricamente y la aritmética es idéntica — pero la tipografía tomó prestada la idea; no heredó una ley. El vocabulario vino con la estructura (la “cuarta justa” de razón 1,333 toma su nombre del intervalo 4:3 de la música), pero nada sobre cómo funciona el sonido obliga a una página web. La estructura se gana su lugar en la página por sus propias razones, que el resto de este artículo recorre.

¿Qué hace realmente size = base × ratio^(i/notes)?

Pon notes = 1 y la fórmula se reduce a la escala modular clásica, size = base × ratio^i: cada paso multiplica por la razón completa. Aumentar notes divide cada uno de los intervalos de la escala modular en esa cantidad de subpasos iguales. La constante entre tamaños adyacentes — el multiplicador de paso — es ratio^(1/notes):

El índice i cuenta notas, no intervalos. Con dos notas, los índices pares reproducen exactamente la escala de una nota, y los índices impares son las adiciones — semitonos entre los tamaños que ya tenías.

¿Cómo se ve una cuarta justa con una nota frente a dos?

Base 16px, razón 1,333, tamaños tal como Scale Composer los redondea para mostrarlos:

Con una nota el problema se ve enseguida: no hay nada en la escala entre 16px y 21px — justo la banda donde las interfaces necesitan más precisión, porque los párrafos destacados, las etiquetas grandes de botón y el texto de UI prominente quieren algo en torno a 18px. Los huecos también se ensanchan arriba (de 38 a 51 hay un salto de 13px), pero esos importan menos: los tamaños display aparecen unas pocas veces por página, los tamaños cercanos al cuerpo, cientos de veces.

Con dos notas la escala gana 18, 25, 33 y 44 — los tamaños intermedios a los que las UIs reales recurren una y otra vez — sin un solo valor arbitrario.

Abre esta comparación en Scale Composer para ver la misma cuarta justa con una y dos notas lado a lado. Arrastra la razón y cada tamaño de ambas columnas se recalcula a partir de las mismas dos decisiones.

¿Por qué los semitonos se mantienen en proporción?

Como todo tamaño — original o añadido — es una potencia de la misma constante, dos tamaños cualesquiera de la escala se relacionan por ratio^(k/notes) para algún número entero de notas k. El semitono de 18px queda a un semitono del cuerpo de texto y a tres de 28px; asciende una etiqueta un paso y su relación con todo lo demás sigue siendo un intervalo de la escala. (Los tamaños se redondean para mostrarlos; las relaciones se mantienen en los valores sin redondear que la escala calcula.) La música tiene la misma propiedad con otro nombre: transposición. Desplaza una melodía cualquier número de semitonos y sus relaciones internas sobreviven, porque todo intervalo del temperamento igual es un número entero de la misma unidad.

También hay una razón perceptual para que la subdivisión sea geométrica y no aritmética. La percepción de la altura es casi logarítmica — oímos razones de frecuencia iguales como distancias musicales iguales, y por eso el temperamento igual divide la octava por razón y no por hercios. Juzgar el tamaño relativo parece funcionar de forma parecida: pasar de 16px a 18px y pasar de 33px a 38px se leen como pasos comparables, porque ambos son un semitono — el mismo salto proporcional. Subdividir por razón, por tanto, se siente uniforme a lo largo de toda la escalera, mientras que sumar una cantidad fija de píxeles (16, 18, 20, 22 …) se siente progresivamente más apretado a medida que crecen los tamaños.

¿Cuándo ayudan más notas — y qué cuestan?

El valor de las notas extra se concentra en productos densos: paneles, tablas de datos, pantallas de ajustes — cualquier lugar donde mucho texto debe diferenciarse dentro de una banda estrecha de tamaños. Entre 12px y 24px, una cuarta justa de una nota ofrece tres tamaños; dos notas ofrecen cinco; cuatro notas ofrecen unos diez. Las páginas de marketing y editoriales con mucho texto rara vez necesitan esa densidad — su jerarquía vive en los intervalos grandes, no entre ellos.

El coste es más sutil que el beneficio: cada paso añadido es un tamaño que alguien puede elegir ahora, y más opciones invitan a un mayor uso. La escala define lo que está disponible; tus roles tipográficos deciden lo que se usa. Una escala de cuatro notas de la que se asignan seis roles es un instrumento de precisión; la misma escala usada por completo es elegir a mano con aritmética de más. Y como Scale Composer deriva los pasos de espaciado de la misma escala, las notas extra también densifican las opciones de espaciado — allí se aplica la misma disciplina.

Siente cómo son cuatro notas

El compromiso es más fácil de sentir que de leer. Con cuatro notas por intervalo, el multiplicador de paso baja a unos 1,075 y la escalera del cuerpo de texto a h1 crece hasta diecisiete tamaños, muchos casi indistinguibles de sus vecinos. Hazle a cada paso la única pregunta que importa — ¿qué trabajo haría este tamaño? — y deja que los pasos con respuesta se conviertan en roles mientras el resto queda en reserva. Abre la misma cuarta justa, supermuestreada a cuatro notas por intervalo, y observa con qué rapidez distingues a los que trabajan de los de reserva.