Escala tipográfica: tamaños con relación y proporciones

Una escala tipográfica es un conjunto de tamaños de letra construido a partir de un tamaño base y una proporción. Empiezas con el tamaño del cuerpo, digamos 16 px, y lo multiplicas por la proporción para obtener el siguiente tamaño, y vuelves a multiplicar para el siguiente. Con una proporción de 1,25 obtienes 16, 20, 25, 31, 39 y 49 px. Como cada paso crece en la misma proporción, los tamaños parecen relacionados, y elegir el tamaño de un título deja de ser una conjetura.

Por qué una escala tipográfica hace que los tamaños parezcan relacionados

El ojo lee el tamaño como proporción, no como píxeles. El salto de 16 a 20 se siente igual que el de 39 a 49, porque ambos son un cuarto mayor. Los tamaños elegidos a ojo tienden a agruparse en unos sitios y a dejar huecos en otros, de modo que dos títulos acaban casi del mismo tamaño y parecen un error. Una escala da a cada nivel un paso claro y coherente, que es la columna vertebral de la jerarquía visual.

Proporciones habituales de escala tipográfica comparadas

Muchas proporciones populares toman su nombre de intervalos musicales, y una escala construida así suele llamarse escala modular. El nombre importa menos que el tamaño del paso: cuanto mayor la proporción, más drama entre niveles y menos niveles caben en una página.

Valores de la escala tipográfica en píxeles

Aquí está la misma base de 16 px con cuatro proporciones. Fíjate en lo rápido que suben las grandes: en el paso 4, una escala de 1,5 ya está en 81 px, mientras que una de 1,2 está en 33 px.

Redondear está bien. Nadie ve la diferencia entre 31,25 y 31 px, y los números enteros son más fáciles de recordar y de alinear en una cuadrícula.

Cómo construir tu propia escala tipográfica

1. 1

   Elige el tamaño base

   Es tu texto de cuerpo. De 16 a 18 px sirve para la mayoría de los sitios web; en un lienzo social de 1080 px, empieza en 40 px.

2. 2

   Elige una proporción según el contenido

   Mucho texto y muchos niveles de título piden una proporción pequeña. Pocas palabras y un gran titular piden una grande.

3. 3

   Genera cinco o seis pasos

   Multiplica hacia arriba para los títulos y divide una vez para el texto pequeño. La mayoría de los diseños nunca usan más de seis tamaños.

4. 4

   Redondea y ponles nombre

   Redondea a píxeles enteros y nombra los pasos por su función, como pie, cuerpo, título y exhibición, no por número.

5. 5

   Fija la altura de línea de cada paso

   Los tamaños mayores necesitan un interlineado más cerrado. Cuerpo en torno a 1,5, títulos en torno a 1,2, texto de exhibición cerca de 1,0.

6. 6

   Pruébala con palabras reales

   Compón un titular, un subtítulo y un párrafo reales. Si dos pasos se parecen demasiado, salta uno o sube la proporción.

Una escala tipográfica para publicaciones sociales

Las publicaciones sociales necesitan una proporción mayor que las páginas web, porque un lienzo de 1080 px se reduce a un tercio de su ancho en un móvil y solo hay dos o tres niveles de texto. Una base de 40 px con una proporción de 1,5 da 40, 60, 90 y 135 px, que encaja bien con los tamaños de tamaño de letra para publicaciones de Instagram.

Usar una sola escala en todas las diapositivas de un carrusel es lo que hace que un conjunto parezca diseñado y no ensamblado. Los mismos tamaños en las mismas funciones, diapositiva tras diapositiva. La maquetación del texto en publicaciones sociales muestra cómo organizarlos.

Cómo escribir una escala tipográfica en CSS

Guarda la escala como propiedades personalizadas para que cada componente tire de ella. Puedes encadenar multiplicaciones con calc(), o escribir los valores redondeados. Para una escala que crece con la pantalla, da a cada paso un rango con clamp(): un mínimo para móviles, un máximo para pantallas anchas y un valor fluido entre ambos.

/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }

Una escala es una parte de un conjunto mayor de decisiones sobre tipografías, espaciado y funciones. El sistema tipográfico las reúne, y tracking vs kerning trata los valores de espaciado que acompañan a cada paso. Si diseñas contenido social, el kit de marca de Gradiently guarda tus tipografías de titular y de cuerpo y el Designer las aplica a cada nuevo tamaño, lo que facilita mantener una escala que fijas una sola vez.