Genera una escala tipográfica modular armoniosa con proporción áurea, tercera mayor y otras proporciones clásicas. Vista previa visual de tamaños y copia del CSS completo.
Una escala tipográfica es un conjunto de tamaños de fuente que siguen una proporción matemática consistente. En lugar de elegir tamaños al azar, cada paso se multiplica por la misma proporción, creando un ritmo visual y una jerarquía entre los títulos, el cuerpo del texto y los subtítulos.
Elija un tamaño base (16px es el valor predeterminado del navegador y un punto de partida sólido), luego elija una proporción. Proporciones más pequeñas como 1,125 crean escalas sutiles y elegantes para sitios editoriales; proporciones más grandes, como 1,618, crean un contraste espectacular para las páginas de marketing.
Una escala tipográfica es un conjunto fijo de tamaños de fuente que siguen una misma proporción matemática, de modo que cada paso se relaciona con el siguiente por el mismo ratio. En lugar de elegir tamaños a ojo — 14, 17, 22, 31... — eliges un tamaño base y lo multiplicas (o divides) por el ratio una y otra vez: 16 × 1,25 = 20, × 1,25 = 25, y así. El resultado es una jerarquía que se siente intencionada: títulos, cuerpo, leyendas y etiquetas parecen miembros del mismo sistema, no un montón de tamaños sueltos.
Los ratios habituales se comportan distinto. 1,125 y 1,2 crean pasos sutiles y elegantes, ideales para interfaces densas con mucho texto. 1,25 y 1,333 son los caballos de batalla de la web: jerarquía notable sin drama, y 1,333 es casualmente la cuarta justa musical clásica. 1,5 produce saltos audaces para sitios de contenido. 1,618 — la proporción áurea — es llamativo pero agresivo: hermoso para títulos de display y páginas de marketing, normalmente excesivo para lectura larga.
16px es el valor por defecto del navegador y el punto de partida correcto para el cuerpo en escritorio: iguala la comodidad de lectura de los libros impresos, es legible para la mayoría y cumple las guías de accesibilidad. Las interfaces móviles pueden empezar algo más abajo (15px) o quedarse en 16px. Fijado el base, todo lo demás deriva de él — títulos multiplicando hacia arriba, leyendas y etiquetas dividiendo hacia abajo — así un solo cambio en el base reajusta toda la jerarquía de forma consistente.
Una escala es más que tamaños de fuente. El interlineado debe crecer cuando el texto se encoge: 1,5–1,6 para el cuerpo, 1,2–1,4 para títulos. Para el ritmo vertical, multiplica tu tamaño base por el ratio de la escala y obtén los pasos de espaciado — si tu escala es 16/20/25/31, esos mismos números sirven como incrementos de márgenes y paddings. Cuando tamaños y espaciados comparten un ratio, cada elemento encaja en una cuadrícula invisible y la página se siente compuesta, no ensamblada.
El texto debe escalar con fluidez entre móvil y escritorio. El CSS moderno lo resuelve en una línea: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — un mínimo, un tramo fluido y un máximo. Toma el mínimo y el máximo de tu escala (por ejemplo, 16px a 28px) y el término de viewport hace el resto: los títulos se encogen con elegancia en móvil y crecen en monitor sin una sola media query.
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Color icónico del diseño mexicano, creado por Ramón Valdiosera
Tinte tradicional de los textiles mayas de Guatemala
El rojo intenso de los toros y la cerámica española
El oro del maíz, base de la alimentación mesoamericana
La piedra sagrada de mayas y aztecas
El azul de la bandera argentina y el cielo porteño
Arcilla cocida — el color de los tejados coloniales
El burdeos de las bodegas de La Rioja
El dorado de los retablos barrocos americanos
El color de las playas del Caribe