devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Website-Check

Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

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.

Aktualisiert am

Preview


  


    
 Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

    
    
    

      
So nutzt du: 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.
Auch gesucht als: typography scale, modular scale generator, fluid typography generator, font size scale, clamp font size generator, tailwind font size scale, type scale calculator.
Passende Tools zu: 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.
  • Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und 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.
Häufige Fragen
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.
Kann ich Type Scale Generator als Web-App installieren und offline nutzen?
Ja. Type Scale Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

      
    

    
    
Ähnliche Tools
localKlemmenrechnerGib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen…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…localTailwind-FarbgeneratorFüge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH…localContrast CheckerEnter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA…