Escala tipográfica: la guía práctica
Una escala tipográfica es un conjunto limitado y ordenado de tamaños de fuente generado a partir de dos decisiones —un tamaño base y una proporción— en lugar de tamaños elegidos uno a uno. Cada tamaño de la escala se relaciona con todos los demás por la misma proporción, y eso es lo que hace que una página se lea como compuesta y no como ensamblada. Este hub reúne nuestras guías para elegir, construir y usar escalas tipográficas; la forma más rápida de hacerse una idea es abrir una escala funcional en Scale Composer y arrastrar la proporción.
Empieza por la proporción
La proporción es la personalidad de tu tipografía: las proporciones pequeñas (1,125–1,25) crean jerarquías sutiles y densas para interfaces de producto; el rango medio (1,333–1,414) sostiene sitios de contenido con comodidad; las proporciones grandes (1,5–1,618) producen una jerarquía editorial dramática que gasta espacio rápidamente. Los artículos de abajo recorren los compromisos, incluida una mirada honesta a la famosa proporción áurea: dónde 1,618 se gana su reputación y dónde desperdicia tus pasos superiores.
La razón por la que una sola proporción se lee como compuesta es perceptual, no matemática: cuando cada salto entre tamaños es la misma proporción, el ojo aprende la relación una vez y deja de volver a medir; la jerarquía se registra antes de que empiece la lectura. Los tamaños elegidos uno a uno no llevan ninguna señal compartida, y por eso la tipografía improvisada se siente ruidosa aunque cada tamaño individual parezca razonable por su cuenta.
Notas: la parte que la mayoría de calculadoras de escala se saltan
Una secuencia de proporción pura deja huecos justo donde las interfaces necesitan precisión: nada entre 16px y 21px, y sin embargo un párrafo destacado pide 18. Dividir cada intervalo de la proporción en notas, como una octava se divide en notas, produce tamaños intermedios que siguen perteneciendo a la escala. Es la diferencia entre una escala que admiras y una escala que realmente puedes lanzar.
El vocabulario está tomado de la música a propósito: Intervalos musicales en la tipografía explica qué hacen las notas en una escala y por qué la analogía se sostiene. Las notas no significan más tamaños con nombre, eso sí: ¿Cuántos tamaños de fuente necesita un sistema de diseño? sostiene que la respuesta se mantiene alrededor de nueve a doce incluso con tamaños intermedios disponibles, porque cada tamaño con nombre debería ser una decisión visible y no un subproducto de la matemática.
Una escala, todo el sistema
La misma base y proporción que generan tus tamaños de fuente pueden generar más: una unidad de línea base igual a la mitad de la base para los interlineados, los pasos de espaciado de tu sistema de espaciado y las medidas de rejilla que avanzan por la misma progresión. La tipografía suele ser donde empieza la escala, pero el beneficio se multiplica cuando el resto del sistema la comparte: cambia un número y todo se reafina a la vez.
Esa es la premisa de Scale Composer: una escala rige la tipografía, el color, el espaciado y la rejilla, y los exporta juntos. El hub de rejilla de maquetación cubre la parte de columnas de ese sistema; y si los tamaños también deben adaptarse entre viewports, la tipografía fluida muestra cómo la misma escala puede interpolar con CSS clamp() en lugar de saltar en los breakpoints.
Por dónde empezar a leer
Si el concepto es nuevo para ti, empieza con ¿Qué es una escala tipográfica modular?: construye la idea central a partir de un ejemplo resuelto. Después fija las dos entradas: Por qué 16px es el tamaño de fuente base por defecto cubre la base, y las guías de proporción de arriba cubren el multiplicador. Con esas fijadas, toman el relevo las guías de aplicación: Tamaños de encabezado mapea la escala sobre h1–h6, Interlineado: el método de la rejilla de línea base la extiende al ritmo vertical, y rem vs px vs em cubre las unidades en las que se lanza la escala. 7 errores con las escalas tipográficas funciona como lista de comprobación final para contrastar con el sistema que acabas de construir.
Guías de este hub
- ¿Cuántos tamaños de fuente necesita un sistema de diseño?
¿Cuántos tamaños de fuente necesita un sistema de diseño? Por qué los roles deciden la cuenta, por qué muchos sistemas se sitúan cerca de 9–12 niveles y cuándo se justifica añadir un tamaño.
- ¿Qué es el ritmo vertical (y merece la pena)?
El ritmo vertical hace que cada distancia vertical sea múltiplo de una unidad para que el texto vuelva con un pulso constante. Qué aporta, qué cuesta y la versión pragmática.
- ¿Qué es una escala tipográfica modular?
Una escala tipográfica modular genera cada tamaño de fuente a partir de un tamaño base y una razón. Aprende la fórmula, cómo elegir una razón y por qué las escalas superan a los tamaños elegidos a mano.
- 7 errores de escala tipográfica que rompen un sistema de diseño
Siete errores de escala tipográfica que rompen sistemas de diseño en silencio — tamaños fuera de escala, ratios pronunciadas, interlineados adivinados — con el mecanismo y la solución de cada uno.
- Cómo nombrar los tokens de tipografía (display, heading, body, caption)
Cómo nombrar los tokens de tipografía: nombres de rol como heading-lg y body-md en lugar de valores o elementos, tokens compuestos y la ruta de exportación al código.
- Cuarta justa vs tercera mayor: cómo elegir el ratio de una escala tipográfica
Cómo elegir el ratio de una escala tipográfica: cuarta justa vs tercera mayor comparadas paso a paso en base 16, los nombres musicales explicados y una prueba práctica de densidad.
- Escalas tipográficas para móvil y escritorio
Una escala tipográfica adaptable mantiene el texto de cuerpo en 16px y aplana la parte superior en móvil: bajar la razón de 1,333 a 1,2 lleva un h1 de 51px a 33px.
- Estilos display vs título vs cuerpo explicados
Estilos de fuente display vs título vs cuerpo: tres roles de texto con trabajos distintos — vender, navegar, transportar — y los tamaños y el espaciado que cada uno necesita.
- Grosores de fuente en una escala: emparejar tamaño y grosor
Cómo emparejar el grosor de fuente con el tamaño en una escala tipográfica: cuerpo a 400, titulares a 600–700, etiquetas pequeñas a 500 y cuándo el grosor puede sustituir a un paso de tamaño.
- Interlineado: el método de la rejilla de línea base
Elige cada interlineado como un múltiplo de una unidad de línea base —la mitad del tamaño de fuente base— en lugar de adivinar por elemento. Tabla trabajada de 12px a 51px.
- Intervalos musicales en tipografía: qué hacen las notas en una escala
Las notas de una escala tipográfica subdividen cada intervalo de la razón en pasos iguales, como los semitonos en la música. Mira la fórmula size = base × ratio^(i/notes) con números reales.
- Por qué 16px es el tamaño de fuente base predeterminado
Por qué 16px es el tamaño de fuente base predeterminado: la historia detrás del valor por defecto del navegador, qué significa para la accesibilidad y las unidades rem, y cuándo 18px se lee mejor.
- Reglas de espaciado entre letras según el tamaño de fuente
Reglas de espaciado entre letras según el tamaño de fuente: aprieta el texto grande de display, deja en paz el texto de cuerpo, abre las etiquetas pequeñas en mayúsculas — con valores reales en em por nivel.
- rem vs px vs em para el tamaño de fuente
rem vs px vs em para tamaños de fuente: por qué rem respeta la configuración del navegador del lector, dónde px sigue teniendo sentido y cómo em se acumula — con una escala en ambas unidades.
- Tamaños de títulos: cómo construir una jerarquía h1–h6
Deriva los tamaños de título de una escala tipográfica en lugar de escoger seis valores: un mapeo h1–h6 con números reales, y por qué los niveles son estructura mientras que el tamaño es estilo.
- Tipografía con proporción áurea: ¿1,618 funciona de verdad?
La tipografía con proporción áurea multiplica cada tamaño de fuente por 1,618. Mira la escala calculada en base 16px, dónde se rompen los saltos y dónde 1,618 se gana su lugar.
Pruébalo antes de seguir leyendo
La teoría cala mejor con tus propios números: abre una escala densa de interfaz de producto —proporción 1,2, del tipo que encaja en cuadros de mando— y luego sube la proporción hacia 1,5 y observa cómo esos mismos cinco niveles se vuelven editoriales. Diez segundos de arrastre explican la tabla de proporciones mejor que cualquier prosa.