devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en inglés.

Type Scale Generator — Modular and Fluid Font Sizes

Pick a base font size and a ratio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — and get a harmonious set of font sizes for headings and body text. Turn on fluid type to make every step grow smoothly between a mobile and a desktop scale with clamp(), preview it at any screen width, and copy CSS variables, a Tailwind config or SCSS.

Actualizado el

Preview


  


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

    
    
    

      
Cómo usar: Type Scale Generator
  1. Set the base size (usually 16 px, your body text) and a ratio — bigger ratios give more contrast between headings.
  2. Choose how many steps go below (small print, captions) and above (h4 to h1, display).
  3. Turn on Fluid to use a smaller base and ratio on phones that grow to the desktop scale; drag the screen-width slider to preview.
  4. Copy the CSS variables, the Tailwind fontSize config or an SCSS map.


What a modular scale is


A type scale multiplies the base size by the same ratio for every step: with 16 px and 1.25, the steps are 16, 20, 25, 31.25, 39 px… Sizes that share one ratio look related, which is why typographers borrowed ratios from music — the Major Third (1.25), Perfect Fourth (1.333) and Perfect Fifth (1.5) — and the Golden Ratio (1.618).


  • Small ratios (1.125–1.2) suit dense interfaces, dashboards and long reading.
  • Large ratios (1.333–1.618) suit marketing pages with big, confident headlines.


Fluid type with clamp()


A heading that is perfect on desktop is often too big on a phone. Fluid steps interpolate between a mobile scale and a desktop scale: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) stays at the minimum on small screens, grows linearly with the viewport, and stops at the maximum. Values are in rem, so they still respect the visitor’s browser font-size setting. For single values, see the Clamp Calculator; convert units with PX to REM.
También se busca como: typography scale, modular scale generator, fluid typography generator, font size scale, clamp font size generator, tailwind font size scale, type scale calculator.
Herramientas que combinan con: Type Scale Generator
  • CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
  • CSS Flexbox Generator — See exactly what every flexbox property does: set the direction, wrapping, justify-content, align-items and gap, add or remove items, and click any item to set its flex-grow, shrink, basis, order and 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.
  • Contrast Checker — Enter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA score and one-click fixes that keep your hue.
Preguntas frecuentes
Which type scale ratio should I use?
Start with 1.25 (Major Third) for most websites. Use 1.2 or smaller for apps and text-heavy pages, and 1.333 or larger for landing pages with big headlines.
What is fluid typography?
Font sizes that grow smoothly with the screen width instead of jumping at breakpoints. Each step uses clamp() with a minimum for phones and a maximum for large screens.
How do I use the scale in Tailwind?
Choose the Tailwind output and paste the fontSize object into theme.extend in tailwind.config.js. Then use classes like text-lg or text-3xl as usual.
Why rem instead of px?
rem follows the visitor’s browser font-size setting, so text scales for people who need larger type. 1rem equals 16 px by default.
¿Puedo instalar Type Scale Generator como aplicación web y utilizarla sin conexión?
Sí. Type Scale Generator 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…localPX to REM ConverterConvert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert…localCSS Grid GeneratorSet the columns, rows and gap, then drag across cells to make areas like header, sidebar and main. You get…localCSS Flexbox GeneratorSee exactly what every flexbox property does: set the direction, wrapping, justify-content, align-items…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…localContrast CheckerEnter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA…