Generador de escala tipográfica con CSS clamp() fluido | We.Inc
Genera una escala tipográfica modular a partir de un tamaño base y una proporción, con valores clamp() fluidos para cada escalón, una vista previa en vivo y variables CSS o de Tailwind para copiar.
Generador de escala tipográfica
Una escala tipográfica multiplica un tamaño de letra base por una misma proporción una y otra vez, de modo que cada tamaño de título guarda relación con el texto del cuerpo. Elige una base y una proporción para teléfonos y otras para escritorio; este generador convierte cada escalón en un valor clamp() en rem y vw que crece de forma suave entre los dos anchos.
Proporciones habituales y para qué sirven
Proporción
Valor
Sensación
Segunda menor
Aplicaciones densas, paneles
Segunda mayor
Aplicaciones densas, paneles
Tercera menor
Artículos, páginas de marketing
Tercera mayor
Artículos, páginas de marketing
Cuarta justa
Artículos, páginas de marketing
Cuarta aumentada
Pósteres, landing pages llamativas
Quinta justa
Pósteres, landing pages llamativas
Proporción áurea
Pósteres, landing pages llamativas
La mayoría de las herramientas de escala tipográfica dan un único conjunto fijo de tamaños. Esta da dos, una escala para pantallas pequeñas y otra para pantallas grandes, y las une con clamp() para que publiques una sola regla por escalón en lugar de un montón de media queries.
Por qué dos proporciones
Una proporción que se ve generosa en un monitor de 1440 píxeles hace que los títulos ocupen cuatro líneas en un teléfono. Usar una proporción más ajustada en pantallas pequeñas, como 1.2, y una más amplia en pantallas grandes, como 1.25 o 1.333, mantiene los titulares contundentes en escritorio y legibles en móvil.
Los escalones por debajo de cero funcionan igual pero a la inversa: la base se divide entre la proporción, lo que da tamaños para pies de foto y letra pequeña que se mantienen proporcionados.
Cómo se calculan los valores clamp()
Para cada escalón, la herramienta conoce el tamaño en el ancho pequeño y en el ancho grande. Traza una línea recta entre esos dos puntos: la pendiente se convierte en la parte vw y el desplazamiento inicial en la parte rem del valor preferido.
Después, clamp(min, preferred, max) mantiene el tamaño en el mínimo por debajo del ancho pequeño y en el máximo por encima del ancho grande. Mezclar rem en el valor preferido importa: un tamaño solo en vw ignora el zoom del navegador, mientras que la parte rem sigue creciendo cuando alguien amplía.
MDN aconseja que, cuando clamp() define el tamaño del texto, el máximo sea al menos el doble del mínimo para que el texto pueda llegar al 200 por ciento de zoom, el nivel de redimensionado de WCAG 1.4.4. Un rango fluido moderado no lo cumplirá por sí solo, así que prueba tus escalones más grandes con el zoom del navegador al 200 por ciento.
Define el tamaño de letra raíz (16, salvo que tu CSS cambie el tamaño de html) y los anchos de viewport estrecho y amplio.
Elige un tamaño base y una proporción para cada extremo. Valores iguales dan una escala fija; valores distintos dan una fluida.
Elige cuántos escalones necesitas por encima y por debajo de la base. La mayoría de los sitios usan cuatro o cinco por encima y uno o dos por debajo.
Arrastra el control de ancho de la vista previa para ver cada escalón en cualquier tamaño de pantalla y luego copia las variables CSS o el bloque de tema de Tailwind.
Empieza el texto del cuerpo entre 16 y 18 píxeles; ir más pequeño perjudica la lectura larga en teléfonos.
Reduce el interlineado a medida que crece el tamaño: alrededor de 1.5 para el cuerpo y de 1.1 a 1.2 para títulos grandes queda equilibrado.
Rara vez necesitas más de seis escalones. Si dos escalones se ven casi iguales en la vista previa, elimina uno.
Nombra las variables por escalón, no por elemento (step-3 en lugar de h2), para que el título de una tarjeta pueda tomar prestado un tamaño de título sin confusión.
Preguntas frecuentes
¿Cuál es una buena proporción para una escala tipográfica?
Para sitios con mucho texto, 1.2 (tercera menor) o 1.25 (tercera mayor) son opciones seguras. 1.333 (cuarta justa) encaja con páginas de marketing con títulos cortos y contundentes. Las proporciones de 1.5 o más dan saltos grandes que funcionan en pósteres, pero enseguida producen títulos enormes.
¿Es buena la proporción áurea para la tipografía?
Con unos 1.618 es muy pronunciada: cinco escalones por encima de 16px ya superan los 170px. Puede funcionar para una escala de display de dos o tres escalones, pero la mayoría de las interfaces se leen mejor con una proporción menor.
¿Por qué usar rem más vw en lugar de solo vw?
El texto dimensionado solo en vw no responde al zoom de texto del navegador, lo que perjudica a quienes amplían el texto. La parte rem del valor preferido mantiene el zoom funcionando, mientras vw se encarga del crecimiento suave entre anchos.
¿Puedo usar el resultado con Tailwind CSS?
Sí. Tailwind v4 crea una utilidad text-* a partir de cada variable --text-* dentro de un bloque @theme, así que pegar el resultado para Tailwind te da clases como text-step-2 en tu marcado.
Cómo usar la escala en tu CSS
Un ejemplo completo: base de 16px a 375px que sube a 18px a 1280px, con proporción de 1.2 que sube a 1.25.
Escalones como propiedades personalizadas
Cada escalón es un clamp(). Aplícalos a elementos o a clases de utilidad, junto con el interlineado de cada escalón.
Resultado en vivo
Las mismas variables en una página pequeña. Edita el código para probar otros valores; el marco es estrecho, así que ves el extremo de pantalla pequeña.
Nombres de las proporciones y valores exactos
Los nombres musicales vienen de las proporciones de frecuencia de los intervalos; cada valor aquí es la fracción exacta redondeada a tres decimales.
Proporciones con nombre
Nombre
Fracción
Valor
Cinco escalones por encima de 16px
Segunda menor
Segunda mayor
Tercera menor
Tercera mayor
Cuarta justa
Cuarta aumentada
Quinta justa
Proporción áurea
Crea tu escala
Define un tamaño base y una proporción para una pantalla pequeña y para una pantalla ancha. Cada escalón obtiene un valor clamp() que crece de forma suave entre los dos anchos, además de una vista previa en vivo y CSS que puedes copiar.