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

[Canonical HTML page](https://gradiently.design/es/guide/typographic-scale)

Si eliges los tamaños de letra a ojo, se desordenan: 18, 22, 23, 30, 31. Una escala tipográfica sustituye esas conjeturas por un tamaño base y una proporción, y todos los tamaños parecen de la misma familia.

## The short version

- Una escala tipográfica es un conjunto breve de tamaños de letra que resulta de multiplicar un tamaño base por la misma proporción una y otra vez.
- Las proporciones pequeñas, como 1,2, van bien en interfaces densas, y las grandes, como 1,5, en carteles, publicaciones sociales y páginas de aterrizaje.
- Con una base de 16 px y una proporción de 1,25, la escala va de 16, 20, 25, 31, 39 a 49 px.
- La mayoría de los diseños necesitan solo cinco o seis tamaños, y redondear los resultados a píxeles enteros está bien.
- En CSS, una escala tipográfica se mantiene mejor como propiedades personalizadas, hechas fluidas con clamp().

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](https://gradiently.design/es/guide/visual-hierarchy).

## 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.

| Nombre | Proporción | Sensación | Bueno para |
| --- | --- | --- | --- |
| Segunda menor | 1,067 | Apenas diferente | Tablas de datos densas, pantallas pequeñas |
| Segunda mayor | 1,125 | Suave | Apps y paneles |
| Tercera menor | 1,2 | Calmada y clara | Interfaces, documentación, lecturas largas |
| Tercera mayor | 1,25 | Equilibrada | Sitios web y blogs, una opción segura por defecto |
| Cuarta justa | 1,333 | Segura | Páginas de marketing, editorial |
| Cuarta aumentada | 1,414 | Fuerte | Páginas de aterrizaje, presentaciones |
| Quinta justa | 1,5 | Atrevida | Carteles, publicaciones sociales, grandes titulares |
| Proporción áurea | 1,618 | Dramática | Texto de exhibición con pocos niveles |

Proporciones habituales de pequeña a grande. Si dudas, empieza en 1,25 para la web y en 1,5 para publicaciones sociales.

## 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.

| Paso | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Pequeño (paso −1) | 13 | 13 | 12 | 11 |
| Cuerpo (base) | 16 | 16 | 16 | 16 |
| Paso 1 | 19 | 20 | 21 | 24 |
| Paso 2 | 23 | 25 | 28 | 36 |
| Paso 3 | 28 | 31 | 38 | 54 |
| Paso 4 | 33 | 39 | 51 | 81 |
| Paso 5 | 40 | 49 | 67 | 122 |

Valores redondeados a píxeles enteros. El paso por debajo de la base es la base dividida entre la proporción, y sirve para pies de foto y etiquetas.

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. **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. **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. **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. **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. **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. **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](https://gradiently.design/es/guide/font-size-for-social-media).

Una publicación social vertical con una gran estadística que dice pago 3 veces más rápido sobre un texto de apoyo más pequeño

Una publicación de dato necesita tres niveles claros: la cifra, el detalle y la etiqueta. En una escala de 1,5 son 135, 60 y 40 px.

Una diapositiva vertical de carrusel titulada Antes de publicar con una breve lista de control debajo

Una diapositiva de lista usa los pasos inferiores de la misma escala, así que queda cómodamente junto a la diapositiva de dato en un mismo carrusel.

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](https://gradiently.design/es/guide/text-hierarchy-social) 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): un mínimo para móviles, un máximo para pantallas anchas y un valor fluido entre ambos.

```css
/* 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); }
```

Cambia `--ratio` una vez y todos los pasos se actualizan. Deja `rem` en el mínimo de cada clamp para que el texto siga respetando el tamaño de letra que haya elegido la persona que lee.

### Evita

- Diez tamaños cuando bastarían cinco
- Dos títulos con 2 px de diferencia
- La misma proporción para un panel y para un cartel
- Tamaños fijos en píxeles que ignoran los ajustes de letra de quien lee

### Haz

- Cinco o seis pasos, cada uno con una función con nombre
- Salta un paso si dos niveles se parecen
- Proporción pequeña para pantallas densas, grande para pocas palabras
- Tamaños en rem, fluidos con clamp()

Una escala es una parte de un conjunto mayor de decisiones sobre tipografías, espaciado y funciones. [El sistema tipográfico](https://gradiently.design/es/guide/brand-typography-system) las reúne, y [tracking vs kerning](https://gradiently.design/es/guide/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.

## FAQ

### ¿Qué es una escala tipográfica?

Un conjunto de tamaños de letra que resulta de multiplicar un tamaño base por la misma proporción de forma repetida, de modo que cada tamaño está relacionado proporcionalmente con los demás.

### ¿Cuál es la mejor proporción para una escala tipográfica?

No hay una única mejor. 1,2 o 1,25 va bien en sitios web y apps con mucho texto; 1,5 o más va bien en carteles y publicaciones sociales con pocas palabras.

### ¿Cuántos tamaños de letra debe usar un diseño?

Normalmente cinco o seis: un tamaño pequeño, el cuerpo, dos o tres niveles de título y un tamaño de exhibición.

### ¿Debo redondear los valores de una escala tipográfica?

Sí. Redondear a píxeles enteros no supone ninguna diferencia visible y hace que la escala sea más fácil de usar y de recordar.

### ¿Cómo hago que una escala tipográfica sea adaptable en CSS?

Usa `clamp()` en cada paso, con un mínimo en rem, un valor medio fluido con unidades de viewport y un máximo para pantallas anchas.