devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Audit du site

Cette page n’est pas encore traduite en français : elle s’affiche en anglais.

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.

Mis à jour le

Preview


  


    
 Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

    
    
    

      
Comment utiliser : 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.
Aussi recherché comme : typography scale, modular scale generator, fluid typography generator, font size scale, clamp font size generator, tailwind font size scale, type scale calculator.
Outils complémentaires : 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.
  • Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et 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.
Questions fréquentes
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.
Puis-je installer Type Scale Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Type Scale Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

      
    

    
    
Outils similaires
localCalculateur de colliers de serrageSaisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une…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…localGénérateur de couleurs TailwindIl vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes…localContrast CheckerEnter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA…