Escala tipográfica: cómo elegir los tamaños de letra de tu web o tus piezas

Qué es una escala tipográfica

Es una serie de tamaños de letra relacionados entre sí por una proporción fija. En lugar de elegir 14, 17, 23 y 31 porque “quedan bien”, partís de un tamaño base y multiplicás siempre por la misma razón. El resultado es una jerarquía armónica: títulos, subtítulos y texto se ven parte de un mismo sistema.

Cómo se calcula

tamaño = base × razón ^ paso

Con una base de 16 px y una razón de 1,25:

Razones habituales

Las razones más usadas vienen de la teoría musical y de la tradición tipográfica:

• 1,125 (segunda mayor): escala sutil, para interfaces densas.
• 1,2 (tercera menor): equilibrada, para sitios con mucho texto.
• 1,25 (tercera mayor): una de las más usadas, ideal para la mayoría de las webs.
• 1,333 (cuarta justa): contraste marcado entre niveles.
• 1,5 (quinta justa) y 1,618 (proporción áurea): muy dramáticas, para piezas con títulos muy protagonistas.

Cuanto mayor la razón, más separación hay entre un nivel y el siguiente. En pantallas chicas, las razones altas hacen que los títulos ocupen demasiado.

Cómo aplicarla en CSS

Conviene usar rem (relativo al tamaño base del navegador) en lugar de píxeles, para respetar la configuración de cada persona. Con 16 px = 1 rem y una razón de 1,25:

:root {
  --paso-0: 1rem;
  --paso-1: 1.25rem;
  --paso-2: 1.5625rem;
  --paso-3: 1.953rem;
  --paso-4: 2.441rem;
}

Consejos para que funcione

• Usá pocos niveles. Con cinco o seis tamaños se resuelve casi todo: texto, texto chico, subtítulo, título y título principal.
• Tamaño base de lectura cómodo. Para el texto de una web, 16 px es un punto de partida habitual. Por debajo, cuesta leer en celular.
• Interlineado. Para texto corrido, un interlineado de entre 1,4 y 1,6 veces el tamaño suele leerse bien. Los títulos grandes aguantan menos (1,1 a 1,2).
• Que el título principal se adapte. En CSS podés usar clamp() para que crezca de forma fluida entre celular y escritorio.
• Respetá el contraste. Una buena escala sobre un color ilegible no sirve: revisalo con el verificador de contraste.

Generá la tuya

El generador gratuito calcula la escala a partir de tu base y tu razón, muestra cómo se ve y te da el CSS listo para copiar.

Preguntas frecuentes