Todos los tutoriales de tipografía recomiendan la Perfect Fourth o el Golden Ratio. Ninguno es la respuesta correcta para la mayoría de productos.
El ratio que eliges determina la personalidad de todo tu sistema tipográfico. Elegirlo mal en la primera hora y pasas el resto del proyecto ajustando tamaños de fuente, intentando compensar una decisión que debería haber sido estructural.
Qué es realmente una escala modular
Una escala modular es un conjunto de números que comparten un ratio común. Partiendo de un tamaño base, cada paso multiplica por ese ratio. El resultado: cada tamaño está matemáticamente relacionado con todos los demás.
El ratio controla lo dramáticos que son los saltos entre niveles. Un ratio alto crea contraste fuerte — los headings dominan. Un ratio bajo crea contraste sutil — la jerarquía viene del peso y el color, no del tamaño.
La decisión por tipo de proyecto
No hay un ratio universalmente correcto. Hay un ratio correcto para un contexto dado. Tres contextos, tres respuestas:
Portfolio, landing, marketing
Ratio: 1.333 — Perfect Fourth
La jerarquía habla por sí misma. El H1 manda en la página con peso normal. No necesitas trucos de color ni bold extremo para establecer qué elemento es primario — la escala hace el trabajo.
/* Perfect Fourth — 1.333 · base 16px */
:root {
--text-sm: 0.750rem;
--text-base: 1.000rem;
--text-lg: 1.333rem;
--text-xl: 1.777rem;
--text-2xl: 2.369rem;
--text-3xl: 3.157rem;
--text-4xl: 4.209rem;
--text-5xl: 5.610rem;
}Señal de que funciona: usa peso normal en un H1. La jerarquía sigue funcionando. Señal de que está mal: el H1 domina tanto que aplasta el body en páginas con mucho contenido. Baja a 1.250.
Producto, app, SaaS
Ratio: 1.250 — Major Third
El contenido y la estructura comparten la página sin competir. Los headings tienen presencia clara sin dominar lo que etiquetan.
/* Major Third — 1.250 · base 16px */
:root {
--text-sm: 0.800rem;
--text-base: 1.000rem;
--text-lg: 1.250rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
}Señal de que funciona: pon un H2 junto a un párrafo de body. Los dos tienen peso. Ninguno aplasta al otro. Señal de que está mal: los headings apenas se diferencian del body en viewport pequeño. Baja a 1.200.
Dashboard, datos, interfaces densas
Ratio: 1.200 — Minor Third (o 1.125 con base 14px)
La información es la protagonista. La tipografía es infraestructura. Cualquier heading que llame más atención que los datos que etiqueta es un error de diseño.
/* Minor Third — 1.200 · base 16px */
:root {
--text-sm: 0.833rem;
--text-base: 1.000rem;
--text-lg: 1.200rem;
--text-xl: 1.440rem;
--text-2xl: 1.728rem;
--text-3xl: 2.074rem;
--text-4xl: 2.488rem;
}
:root {
--text-base: 0.875rem;
--text-lg: 0.984rem;
--text-xl: 1.107rem;
--text-2xl: 1.246rem;
}El line-height es donde los sistemas se rompen
Todos los tutoriales cubren el ratio. Casi ninguno cubre lo que viene después: cada nivel de la escala necesita un line-height distinto.
La regla: a mayor tamaño de texto, menor line-height. Un headline de 72px con line-height: 1.5 parece body text agrandado. Una label de 14px con line-height: 1.1 es ilegible.
:root {
--leading-none: 1.0;
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-heading: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
}
h1 {
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
}
p {
font-size: var(--text-base);
line-height: var(--leading-normal);
max-width: 65ch;
}El letter-spacing completa el sistema
El tercer eje que la mayoría de diseñadores omiten: a mayor tamaño, menor letter-spacing. A menor tamaño, mayor letter-spacing.
Headings grandes con tracking positivo parecen carteles publicitarios. Labels pequeños en mayúsculas sin tracking parecen apretados.
:root {
--tracking-tightest: -0.04em;
--tracking-tighter: -0.02em;
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--tracking-wide: 0.02em;
--tracking-wider: 0.06em;
--tracking-widest: 0.12em;
}
.label {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}El uppercase reduce el espacio óptico entre letras. Sin letter-spacing, el texto en mayúsculas parece apretado aunque no lo esté. 0.06em es el mínimo. Linear, Stripe y Vercel lo hacen.
Un ejemplo real: el sistema de suscripción
En Vocento, el sistema tipográfico tenía que funcionar en 15 marcas simultáneamente. Esa restricción hacía la decisión obvia de inmediato.
Cada marca podía tener su propia elección de fuente — identidades editoriales distintas. Pero la escala, los line-heights y las reglas de letter-spacing tenían que ser idénticos en todas. De lo contrario, implementar un único cambio de componente requeriría 15 calibraciones individuales.
La solución fue un sistema de tokens de dos capas:
:root[data-brand="elpais"] {
--font-display: 'Unidad', serif;
--font-body: 'Tiempos Text', serif;
--color-accent: hsl(0 72% 42%);
}
:root[data-brand="marca"] {
--font-display: 'Druk', sans-serif;
--font-body: 'Graphik', sans-serif;
--color-accent: hsl(214 90% 44%);
}
:root {
--text-base: 1rem;
--text-xl: 1.563rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
--leading-tight: 1.1;
--leading-normal: 1.5;
--tracking-tighter: -0.02em;
--tracking-wider: 0.06em;
}La marca cambia el aspecto de la tipografía. El sistema decide cómo se comporta.
El ratio que nadie elige: 1.250
No es suficientemente dramático para parecer una decisión de diseño. No es tan defendible como "usé el Golden Ratio."
Pero es el ratio detrás de la mayoría de interfaces que consideras bien diseñadas sin poder decir por qué. Aquellas donde la información se siente accesible y la jerarquía se siente clara sin que la tipografía sea lo que notas.
Los mejores sistemas tipográficos son invisibles. El ratio correcto suele ser el que te hace olvidar que hay un ratio.