devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Generador de escala tipográfica: tamaños de fuente modulares y fluidos

Elige un tamaño de fuente base y una razón (Tercera menor, Tercera mayor, Cuarta justa, Razón áurea) y obtendrás un conjunto armónico de tamaños de fuente para encabezados y texto. Activa el texto fluido para que cada paso crezca suavemente entre una escala móvil y otra de escritorio con clamp(), previsualízalo a cualquier ancho de pantalla y copia las variables CSS, una configuración de Tailwind o SCSS.

Actualizado el

Vista previa


  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: Generador de escala tipográfica
  1. Define el tamaño base (normalmente 16 px, tu texto principal) y una razón. Las razones más grandes dan más contraste entre encabezados.
  2. Elige cuántos pasos quieres hacia abajo (texto pequeño, pies de foto) y hacia arriba (de h4 a h1, display).
  3. Activa Fluida para usar una base y una razón más pequeñas en el móvil que crezcan hasta la escala de escritorio; arrastra el control de ancho de pantalla para previsualizar.
  4. Copia las variables CSS, la configuración fontSize de Tailwind o un mapa SCSS.


Qué es una escala modular


Una escala tipográfica multiplica el tamaño base por la misma razón en cada paso: con 16 px y 1.25, los pasos son 16, 20, 25, 31.25, 39 px… Los tamaños que comparten una misma razón se ven relacionados, por eso los tipógrafos tomaron las razones de la música: la Tercera mayor (1.25), la Cuarta justa (1.333) y la Quinta justa (1.5), además de la Razón áurea (1.618).


  • Razones pequeñas (1.125–1.2) encajan en interfaces densas, paneles de control y lectura larga.
  • Razones grandes (1.333–1.618) encajan en páginas de marketing con titulares grandes y llamativos.


Texto fluido con clamp()


Un encabezado que queda perfecto en escritorio suele ser demasiado grande en un móvil. Los pasos fluidos interpolan entre una escala móvil y una de escritorio: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) se mantiene en el mínimo en pantallas pequeñas, crece de forma lineal con el viewport y se detiene en el máximo. Los valores están en rem, así que siguen respetando la configuración de tamaño de fuente del navegador del visitante. Para valores individuales, consulta la Calculadora de clamp; para convertir unidades, usa PX a REM.
También se busca como: escala tipográfica, escala modular de fuentes, generador de tipografía fluida, type scale generator, tamaños de fuente escala, clamp font size generador, escala de tamaños tailwind.
Herramientas que combinan con: Generador de escala tipográfica
  • Generador de CSS Grid — Define las columnas, filas y gap, y luego arrastra sobre las celdas para crear áreas como header, sidebar y main.
  • Generador de Flexbox CSS — Mira exactamente qué hace cada propiedad de flexbox: define la dirección, el ajuste de línea, justify-content, align-items y el gap, añade o quita elementos, y haz clic en cualquier elemento para configurar su flex-grow, shrink, basis, order y align-self.
  • Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
  • Comprobador de contraste — Introduce un color de texto y de fondo para obtener el ratio de contraste WCAG exacto, si cumple cada nivel, una puntuación APCA y correcciones de un clic que mantienen tu tono.
Preguntas frecuentes
¿Qué razón de escala tipográfica debo usar?
Empieza con 1.25 (Tercera mayor) para la mayoría de sitios web. Usa 1.2 o menos para aplicaciones y páginas con mucho texto, y 1.333 o más para landing pages con titulares grandes.
¿Qué es la tipografía fluida?
Tamaños de fuente que crecen suavemente con el ancho de la pantalla en lugar de saltar en los breakpoints. Cada paso usa clamp() con un mínimo para móviles y un máximo para pantallas grandes.
¿Cómo uso la escala en Tailwind?
Elige la salida de Tailwind y pega el objeto fontSize en theme.extend dentro de tailwind.config.js. Después usa clases como text-lg o text-3xl como de costumbre.
¿Por qué rem en lugar de px?
rem sigue la configuración de tamaño de fuente del navegador del visitante, así el texto escala para las personas que necesitan letras más grandes. Por defecto, 1rem equivale a 16 px.
¿Puedo instalar Generador de escala tipográfica como aplicación web y utilizarla sin conexión?
Sí. Generador de escala tipográfica es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas relacionadas
localCalculadora de abrazaderasIntroduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de…localConvertidor PX a REMConvierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa…localGenerador de CSS GridDefine las columnas, filas y gap, y luego arrastra sobre las celdas para crear áreas como header, sidebar…localGenerador de Flexbox CSSMira exactamente qué hace cada propiedad de flexbox: define la dirección, el ajuste de línea,…localGenerador de colores de TailwindPega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en…localComprobador de contrasteIntroduce un color de texto y de fondo para obtener el ratio de contraste WCAG exacto, si cumple cada…