¿Qué es una escala tipográfica?

Una escala tipográfica es el conjunto ordenado de tamaños de fuente que permite un sistema de diseño, generado normalmente multiplicando un tamaño base por una razón constante. Limitar el texto a esos pasos es lo que mantiene coherente la tipografía de una interfaz construida por muchas personas.

Cómo se construye una escala

Elige un tamaño base, normalmente 16px porque es el valor por defecto del navegador y el tamaño que debería tener el texto de cuerpo. Elige una razón. Multiplica hacia arriba y hacia abajo.

Una razón de 1,25 (una tercera mayor) desde una base de 16px da aproximadamente:

12px  ← 16 / 1,25 / 1,067
14px
16px  ← base
20px
25px
31px
39px

Luego los valores se redondean a algo sensato. Las razones habituales van de 1,125 (sutil, buena para interfaces densas) a 1,5 (dramática, mejor para páginas de marketing que para aplicaciones).

Por qué restringir los tamaños

Sin una escala, los tamaños se eligen uno a uno, y una aplicación acumula textos de 13px, 14px y 15px que nadie pretendió que fueran distintos. Se lee como algo ligeramente sin resolver, sin que ninguna cosa concreta esté identificablemente mal.

Una escala también hace manejable el ritmo vertical. Cuando los tamaños se relacionan por una razón conocida, el interlineado y el espaciado pueden relacionarse con ellos de forma predecible en vez de ajustarse componente a componente.

Lo que un tamaño por sí solo no cubre

Un tamaño es solo una parte de una decisión tipográfica. Un conjunto de tokens completo empareja cada paso con:

  • Interlineado: más ajustado en titulares, más holgado en texto de cuerpo. En torno a 1,2 para tamaños de display y 1,5 para cuerpo es un valor por defecto razonable.
  • Peso: qué pesos están disponibles en qué tamaños
  • Espaciado entre letras: el texto grande de display suele necesitar un ligero tracking negativo; el texto pequeño, a menudo uno ligeramente positivo

Los sistemas que tokenizan solo el tamaño dejan los otros tres para volver a decidirse en cada componente, que es donde vuelve la inconsistencia.

Nomenclatura semántica

Nombrar los pasos por su función y no por su tamaño merece la pena por el mismo motivo que en el color:

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg describe un tamaño. --font-size-heading-2 describe una decisión, y cambiar a qué apunta no exige encontrar cada titular.

Elegir las tipografías

El emparejamiento habitual es una tipografía de display con carácter para titulares y una muy legible de uso intensivo para el cuerpo. El modo de fallar es elegir dos tipografías parecidas pero no idénticas, lo que se lee como un error y no como una decisión. Contrasta o iguala; no te quedes casi igual.

Dónde encaja Flash DSM

Los sistemas generados incluyen un emparejamiento tipográfico y una escala completa con tokens de tamaño, peso, interlineado y espaciado entre letras en cada paso, elegidos para el producto descrito en el prompt.