🔤Generador de escala tipográfica para diseño UI

¿Qué es una Escala Tipográfica?

Una interfaz con tamaños de letra elegidos al azar (14px, 17px, 23px...) se ve inconsistente. Una escala tipográfica genera todos los tamaños de texto de un diseño —desde el texto pequeño hasta los títulos grandes— multiplicando un tamaño base por una proporción fija en cada nivel, igual que ocurre en la música con las notas de una escala armónica. Este generador de escala tipográfica crea esa progresión con vista previa real del texto a cada tamaño, y en el Modo 2 va un paso más allá con una escala fluida que usa clamp() para que el texto escale suavemente según el ancho de pantalla, sin depender de docenas de media queries.

¿Cómo se calcula la escala estática?

Ejemplo: con una base de 16px y una proporción de 1,25 (Tercera Mayor), el nivel +1 es 20px, el nivel +2 es 25px, y el nivel −1 (más pequeño que la base) es 12,8px. Cada salto de tamaño mantiene la misma relación proporcional con el nivel anterior, en vez de saltos arbitrarios de píxeles sueltos.

Guía paso a paso: cómo generar tu escala tipográfica

1) Define el "Tamaño de Fuente Base" en píxeles — 16px es el estándar más habitual para el texto de cuerpo. 2) Elige una "Escala Tipográfica" de la lista (Segunda Menor, Tercera Mayor, Proporción Áurea...) según el contraste visual que busques. 3) Ajusta cuántos "Niveles hacia Arriba" necesitas para tus encabezados. 4) Obtén la escala completa con vista previa real del texto renderizado a cada tamaño, más las variables CSS listas para copiar. Si tu proyecto necesita que el texto se adapte de forma continua al ancho de pantalla en vez de usar tamaños fijos, cambia al Modo 2: Escala Fluida (clamp).

¿Qué proporción elegir?

Las proporciones toman su nombre de intervalos musicales: proporciones pequeñas (1,067-1,125) generan escalas sutiles con muchos niveles cercanos, útiles en interfaces densas de datos; proporciones grandes (1,333-1,618) generan más contraste entre niveles, ideal para diseños editoriales con títulos muy destacados. No hay una "correcta" — depende del carácter visual que busques. Si prefieres aplicar esa misma proporción áurea al espaciado en lugar de a la tipografía, la calculadora de espaciado UI usando la proporción áurea genera esa progresión equivalente para márgenes y paddings.

¿Qué es una escala fluida con clamp()?

Una escala estática usa los mismos tamaños en todas las pantallas, lo que a menudo obliga a definir tamaños distintos por media query para que un título no se vea gigante en móvil o diminuto en un monitor grande. La función CSS clamp(mínimo, valor-preferido, máximo) permite que el tamaño escale de forma continua y suave entre un mínimo y un máximo según el ancho del viewport, sin saltos bruscos ni necesidad de múltiples media queries — la técnica de "tipografía fluida" que usan cada vez más diseños modernos.

Casos de uso: dónde aplicar una escala tipográfica

Una escala tipográfica consistente es la base de cualquier sistema de diseño serio: define de una vez la jerarquía completa de encabezados (H1-H6), texto de cuerpo, texto secundario y leyendas, evitando que cada componente nuevo invente su propio tamaño. Es especialmente valiosa al documentar guías de estilo para equipos grandes, al migrar un proyecto heredado hacia unidades relativas, o al construir un sitio con mucho contenido editorial donde la jerarquía visual del texto es la herramienta principal de comunicación. Si necesitas convertir un valor puntual de píxeles a rem fuera de la escala generada aquí, usa el convertidor de píxeles a unidades REM.

Errores comunes al construir una escala tipográfica

El error más frecuente es elegir una proporción grande (1,5 o más) con demasiados niveles, generando títulos absurdamente grandes en los niveles superiores de la escala. Otro error habitual es aplicar tipografía fluida con clamp() a todo el texto, incluido el cuerpo del artículo, cuando en la práctica el texto de párrafo rara vez necesita variar tanto entre dispositivos — la fluidez suele aportar más valor en títulos grandes. Y un tercer error: definir la escala solo en píxeles, perdiendo la ventaja de accesibilidad que ofrece expresarla en rem, que respeta la configuración de tamaño de fuente del navegador del usuario.

Compatibilidad de navegadores y consejos profesionales

La función clamp() tiene soporte en todos los navegadores modernos desde 2020, por lo que la tipografía fluida generada en el Modo 2 es segura de usar en producción sin necesidad de comprobaciones adicionales de compatibilidad. Un consejo profesional habitual: al definir tus niveles de escala como variables CSS (--font-size-h1, --font-size-body...), aplícalas de forma consistente en todos tus componentes en lugar de declarar tamaños sueltos — esto es lo que realmente convierte una escala tipográfica en un sistema mantenible a largo plazo, no solo en un cálculo puntual. Otro consejo: al revisar la vista previa real de esta calculadora, comprueba también la altura de línea (line-height) en cada nivel — los tamaños grandes de encabezado suelen necesitar una altura de línea más ajustada (1,1-1,2) que el texto de cuerpo (1,5-1,6) para mantener una lectura cómoda.

Preguntas Frecuentes (FAQ)