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

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.

Runs in your browserUpdated

Preview


  


    
 Your data never leaves your computer. All processing happens 100% locally in your browser.

    
    
    

      
How to use the 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.
Also searched as: typography scale, modular scale generator, fluid typography generator, font size scale, clamp font size generator, tailwind font size scale, type scale calculator.
Tools that pair well with the 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.
  • 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.
  • CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
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.
Can I install Type Scale Generator as a web app and use it offline?
Yes. Type Scale Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.

      
    

    
Related tools
localClamp CalculatorEnter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths…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 Color GeneratorPaste one brand color and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast…localContrast CheckerEnter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA…