Crear una escala tipográfica para diseño web es la diferencia entre una web que «se ve bien» y una que comunica jerarquía de un vistazo. Sin escala, todos los textos compiten visualmente; con escala, el ojo sabe inmediatamente qué es título, qué es subtítulo y qué es cuerpo. En esta guía vas a aprender los 5 ratios más usados con su tabla de tamaños, cómo calcular tu propia escala manualmente, cómo implementarla en CSS con variables y clamp() para que sea responsive sin media queries, las 5 herramientas online que te ahorran el cálculo, y verás una demo de escala aplicada renderizada dentro del post para que veas el resultado antes de tocar código.
Cero relleno. Si vas con prisa, salta a la sección «CSS moderno con clamp()» y tienes el código listo para pegar. Si quieres entender por qué funciona, lee la sección de ratios primero.
Demo en vivo: una escala tipográfica funcionando
Esta es una escala tipográfica con ratio 1,25 (Major Third) aplicada a un mini-post de ejemplo. Cada tamaño se calcula multiplicando el anterior por 1,25, partiendo de 16px de base. Mira la jerarquía: aunque sea un texto cualquiera, sabes inmediatamente qué es título principal, qué es subtítulo y qué es cuerpo, solo por las proporciones.
Esa demo está hecha con tres líneas de CSS y custom properties. El código completo lo tienes más abajo. Pero antes, entendamos por qué funciona.
Qué es una escala tipográfica y por qué importa
Una escala tipográfica es una serie de tamaños de fuente relacionados entre sí por una proporción matemática constante. En lugar de elegir tamaños al azar (16px, 22px, 28px, 36px), eliges un tamaño base (16px) y un ratio (por ejemplo 1,25), y multiplicas o divides para obtener todos los demás: 16 × 1,25 = 20px, 20 × 1,25 = 25px, 25 × 1,25 = 31,25px, etc.
Esto importa por tres razones concretas:
- Jerarquía visual automática: el ojo humano detecta proporciones matemáticas como armónicas. Una escala bien aplicada se ve «limpia» sin saber por qué.
- Consistencia en todo el sitio: si solo usas tamaños de tu escala, cualquier sección nueva encajará con las existentes sin pensar.
- Responsive sin sufrimiento: con CSS moderno (clamp, custom properties) puedes hacer que toda la escala se ajuste al ancho de pantalla cambiando solo el tamaño base.
Por curiosidad histórica: las escalas tipográficas modernas (Major Second, Perfect Fourth, etc.) toman sus nombres de las escalas musicales. Robert Bringhurst lo formalizó en su libro «The Elements of Typographic Style» (1992) y desde entonces es la base del diseño tipográfico digital.
Los 5 ratios más usados (con tabla)
No todos los ratios sirven para lo mismo. Los más pequeños dan diferencias sutiles, los más grandes generan saltos dramáticos entre niveles. Esta tabla te dice cuál usar según tu proyecto.
| Ratio | Valor | Carácter visual | Mejor para |
|---|---|---|---|
| Major Second | 1,125 | Cambios muy sutiles, casi imperceptibles. | Apps con mucha densidad de información (dashboards, formularios). |
| Minor Third | 1,2 | Cambios suaves, fáciles de leer. | Webs corporativas, blogs con texto largo. |
| Major Third | 1,25 | Diferencias claras sin ser dramáticas. El más popular. | Blogs, e-commerce, webs editoriales. Empieza por aquí si dudas. |
| Perfect Fourth | 1,333 | Saltos más visibles, jerarquía marcada. | Landings con hero grande, magazines digitales. |
| Perfect Fifth | 1,5 | Saltos amplios, mucha presencia visual. | Posters, presentaciones, hero pages con poco texto. |
| Golden Ratio | 1,618 | Saltos muy dramáticos. Estética premium. | Branding editorial, portadas, landings de productos premium. |
Mi recomendación si dudas: 1,25 (Major Third). Es el más usado en blogs y e-commerce porque da jerarquía sin saltos exagerados. Una vez tengas experiencia, prueba 1,333 para landings con más impacto visual.
Cómo calcular tu escala manualmente
El cálculo es directo: tamaño base × ratio = siguiente tamaño. Y al revés, tamaño base ÷ ratio = tamaño menor. Si tu base es 16px y tu ratio 1,25, esta es la escala completa:
- Pequeño: 16 ÷ 1,25 = 12,8px (etiquetas, captions)
- Base: 16px (cuerpo de texto)
- +1: 16 × 1,25 = 20px (subtítulos pequeños, H4)
- +2: 20 × 1,25 = 25px (H3)
- +3: 25 × 1,25 = 31,25px (H2)
- +4: 31,25 × 1,25 = 39,06px (H1 en cuerpo de post)
- +5: 39,06 × 1,25 = 48,83px (Hero principal de landing)
Tres cosas importantes a la hora de aplicarla en un proyecto real:
- No uses todos los pasos: 5-7 niveles son más que suficientes para cualquier proyecto. Si necesitas 12, probablemente no estás usando bien la jerarquía.
- Redondea con cabeza: 39,06px se ve igual que 39px o que 40px en pantalla. Redondea al entero más cercano para CSS más limpio.
- Mantén el line-height proporcional: regla práctica que uso: line-height de 1,5-1,6 para cuerpo (16px → 24-26px), 1,3-1,4 para subtítulos, 1,1-1,2 para títulos grandes.
CSS moderno con variables y clamp()
El error más común que veo en CSS antiguo es hardcodear cada tamaño en píxeles dentro de su selector. Si quieres cambiar de ratio, tienes que reescribir todo el CSS. La forma moderna es definir el tamaño base y el ratio como variables CSS, y derivar todos los demás con calc():
:root {
--base-size: 1rem; /* 16px por defecto */
--ratio: 1.25; /* Major Third */
--ts-xs: calc(var(--base-size) / var(--ratio));
--ts-sm: var(--base-size);
--ts-md: calc(var(--base-size) * var(--ratio));
--ts-lg: calc(var(--base-size) * var(--ratio) * var(--ratio));
--ts-xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio));
--ts-2xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
--ts-3xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
}
body { font-size: var(--ts-sm); line-height: 1.6; }
h1 { font-size: var(--ts-3xl); line-height: 1.1; }
h2 { font-size: var(--ts-2xl); line-height: 1.2; }
h3 { font-size: var(--ts-xl); line-height: 1.3; }
h4 { font-size: var(--ts-lg); line-height: 1.4; }
small, .caption { font-size: var(--ts-xs); }Con este patrón, cambiar la escala de toda tu web es modificar dos variables (--base-size y --ratio). Pero hay un paso más moderno: hacer la escala fluida con clamp(), para que se adapte al ancho de pantalla sin necesidad de media queries.
:root {
/* Base fluido: 16px en móvil, hasta 18px en desktop */
--base-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--ratio: 1.25;
/* Las variables de tamaño usan el base fluido,
así que TODA la escala se ajusta proporcionalmente */
--ts-xs: calc(var(--base-size) / var(--ratio));
--ts-sm: var(--base-size);
--ts-md: calc(var(--base-size) * var(--ratio));
--ts-lg: calc(var(--base-size) * var(--ratio) * var(--ratio));
--ts-xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio));
--ts-2xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
--ts-3xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
}Esto es lo que en 2026 se llama fluid typography: una escala que se «estira» suavemente entre dos breakpoints sin saltos bruscos. Es lo que usan webs modernas como Stripe, Linear o Vercel.
Tip: Si tu proyecto necesita un sistema de diseño completo con escala tipográfica, paleta y componentes ya construidos, en Envato Elements tienes templates HTML/CSS premium con design system y escalas profesionales listas para customizar.
Herramientas online para calcular la escala
Si no quieres calcular nada, estas cinco herramientas hacen el trabajo. Tres clásicas que llevan años funcionando, dos modernas para fluid typography que es lo que se lleva en 2026.
Type Scale
La más usada. Eliges fuente (carga directamente Google Fonts), tamaño base y ratio. A la derecha previsualizas el resultado como tarjeta o como post de blog. Es lo primero que abro cuando empiezo un proyecto.
Utopia.fyi (la moderna)
La herramienta que más uso en 2026 para fluid typography. Defines dos breakpoints (ancho mínimo y máximo de tu pantalla objetivo, normalmente 320px y 1440px) y dos pares de base+ratio (uno para móvil, uno para desktop). Te genera el CSS con clamp() ya calculado, listo para pegar. Cambia el juego.
Modular Scale
La OG de las escalas tipográficas (existe desde 2011). Permite comparar dos ratios uno al lado del otro, lo que es muy útil para decidir si te quedas con 1,25 o subes a 1,333. Diseño minimalista, va directo al grano.
Type Scale Calculator (Spencer Mortensen)
Permite elegir tipografía diferente para títulos y para cuerpo (es decir, calcula escalas para dos fuentes a la vez). Te genera el código CSS y el HTML de ejemplo. Útil cuando trabajas con pares tipográficos.
Material Design Type System
La referencia oficial de Google para tipografía en diseño. Más prescriptiva que las anteriores (te impone roles definidos: display, headline, title, body, label), pero útil cuando tu proyecto sigue Material Design o quieres una escala robusta sin tener que decidir tú los pasos.
Ir a Material Design Type System
Accesibilidad: tamaño base mínimo y contraste
Una escala tipográfica accesible es la diferencia entre una web que funciona para todo el mundo y una que excluye a personas con problemas de visión, lectores de pantalla o navegadores antiguos. Tres reglas innegociables:
- Tamaño base mínimo 16px (1rem): WCAG 2.2 no fija mínimo exacto pero la práctica universal es 16px para cuerpo de texto. Por debajo de eso, las personas con presbicia o problemas leves de visión empiezan a tener dificultad.
- Usa rem y em, NO píxeles fijos: los usuarios pueden cambiar el tamaño base del navegador (Ajustes → Aspecto → Tamaño de fuente). Si usas píxeles fijos, tu CSS ignora esa preferencia. Con rem (relativo al root), respeta la elección del usuario.
- Contraste 4.5:1 mínimo (texto normal) y 3:1 (texto grande): WCAG AA. El gris #6b7280 sobre fondo blanco da 4.83:1, pasa. Si bajas más, no pasa. Comprueba con WebAIM Contrast Checker antes de cerrar el diseño.
Una cosa que NO debes hacer: usar font-size: 12px «para que entre más texto en la pantalla». Es uno de los antipatrones más comunes y es lo que más penaliza la accesibilidad. Si necesitas mostrar mucho texto, replantea la jerarquía y la densidad, no reduzcas el tamaño base.
Preguntas frecuentes sobre escala tipográfica
¿Qué ratio uso si solo voy a elegir uno?
1,25 (Major Third). Es el más usado en blogs, e-commerce y webs editoriales porque da jerarquía clara sin saltos exagerados. Funciona en el 80% de los proyectos. Si después de probarlo te parece muy plano, sube a 1,333 (Perfect Fourth) o 1,5 (Perfect Fifth). Si te parece demasiado dramático, baja a 1,2 (Minor Third).
¿Puedo cambiar el ratio entre móvil y desktop?
Sí, y es lo que hacen muchas webs modernas. En móvil un ratio menor (1,2) mantiene legibilidad sin que los títulos sean desproporcionados. En desktop puedes subir a 1,333 o 1,5 para aprovechar el espacio. Con Utopia.fyi defines ambos y la herramienta genera el clamp() que interpola entre los dos.
¿Cómo elijo el tamaño base correcto?
Para web, 16px (1rem) es el mínimo y el estándar. Lo usan el 90% de las webs modernas. Si tu público objetivo es de edad avanzada o el contenido es muy técnico (mucho texto largo), sube a 18px o 1,125rem. Para móviles, mantén siempre 16px mínimo o iOS hará zoom automáticamente al hacer focus en un input.
¿Cuántos niveles de jerarquía debe tener mi escala?
5-7 niveles cubren cualquier proyecto. Generalmente: small (etiquetas), body (cuerpo), large (subtítulos), xl (H3), 2xl (H2), 3xl (H1 en cuerpo de post), 4xl (hero de landing). Si necesitas más de 7, probablemente estás usando la jerarquía como decoración en lugar de como señal de importancia. Replantea la estructura.
¿Qué es fluid typography y cuándo usarla?
Fluid typography es una escala que se adapta suavemente al ancho de pantalla con clamp(), en lugar de tener tamaños fijos por breakpoint. Úsala cuando: 1) Tu diseño debe funcionar en pantallas muy diferentes (móviles pequeños hasta 4K). 2) Quieres evitar saltos bruscos entre breakpoints. 3) Trabajas con design system moderno. NO la uses si tu proyecto tiene pocos tamaños y los breakpoints son fijos: añade complejidad innecesaria.
¿Cómo combino la escala con pares tipográficos (dos fuentes)?
La escala se aplica al tamaño, no a la fuente. Puedes usar dos fuentes (típicamente una serif para títulos y una sans para cuerpo, o al revés) y aplicar la misma escala de tamaños a ambas. Lo importante es que el line-height se ajuste por fuente, porque dos fuentes a 24px pueden tener alturas visuales distintas. Tienes recomendaciones de pares tipográficos en mi post sobre qué pareja de tipografías quedan bien en una web.
¿Funciona la escala con Tailwind, Bootstrap o frameworks CSS?
Sí, en ambos. Tailwind ya viene con una escala por defecto (text-xs, text-sm, text-base, text-lg, text-xl, text-2xl…) que es customizable en tailwind.config.js. Bootstrap usa una escala más conservadora pero también la puedes sobreescribir con variables Sass. Si trabajas con framework, lo más importante es no romper la escala añadiendo tamaños fuera del sistema.
¿Debe mi escala tipográfica afectar también a botones, badges y otros elementos UI?
Sí. Toda la UI debería usar valores de la escala. Botones grandes a tu –ts-md (20px), botones normales a –ts-sm (16px), badges a –ts-xs (12,8px). Si los elementos UI usan tamaños fuera de la escala, rompes la consistencia visual del sistema. Misma regla para iconos: usar tamaños proporcionales a la escala (16px, 20px, 24px, 32px) cuando los iconos van acompañando texto.
Conclusión
Tienes tres caminos según tu proyecto. Para un blog o web rápida sin complicarse: usa Type Scale online, elige ratio 1,25 y base 16px, copia el CSS y listo. Para un design system moderno con fluid typography: Utopia.fyi te da el CSS con clamp() listo para pegar, escala que se ajusta al viewport sin media queries. Para un proyecto que sigue Material Design o necesitas escala robusta sin decidir: usa la del Material Design Type System y olvídate.
Una vez tengas tu escala, aplícala a TODO: títulos, cuerpo, botones, badges, etiquetas. La consistencia es lo que distingue una web cuidada de una colección de elementos al azar. Si te ha resultado útil, compártelo con alguien que esté empezando con diseño web. Disfrútalo!
