Type Scale Calculator: modular scale with fluid CSS clamp() export

    About the Type Scale Calculator

    A type scale is a set of font sizes related by a fixed ratio. Choose a base size, usually the body text size, and a ratio. Each step up multiplies the size by the ratio and each step down divides by it, so every size has a clear relationship to the others. This calculator previews the scale with your own sample text and exports it as CSS custom properties, SCSS variables, JSON or a Tailwind fontSize config.

    Static mode outputs plain rem values. Fluid mode outputs a CSS clamp() for each step, so type grows smoothly between a small and a large viewport instead of jumping at breakpoints. It uses two scales, one for small screens and one for large screens, and works out the preferred value as a rem offset plus a vw slope.

    How to build a type scale

    1. Enter the base size, usually your body text size, and choose a ratio.
    2. Set how many steps you need below and above the base.
    3. Switch to Fluid to add a large-screen base size, ratio and the two viewport widths.
    4. Choose CSS, SCSS, JSON or Tailwind, then copy the result.

    Frequently asked questions

    What is a type scale?

    A type scale is a set of font sizes where each size is the one before it multiplied by a fixed ratio. Starting from a base size such as 16px, a ratio of 1.25 gives 16, 20, 25, 31.25 and so on upward, and 12.8, 10.24 downward. Using a scale keeps headings, body text and captions in proportion.

    Which ratio should I choose?

    Small ratios such as Major Second (1.125) or Minor Third (1.2) give subtle steps that suit dense interfaces and apps. Larger ratios such as Perfect Fourth (1.333) or the Golden Ratio (1.618) give dramatic headings that suit editorial pages and landing pages. Major Third (1.25) is a common middle ground.

    How does the fluid clamp() output work?

    In fluid mode you set one base size and ratio for a small viewport and another for a large viewport. For every step the tool works out a minimum and a maximum size, then writes clamp(min, preferred, max), where the preferred value is a rem offset plus a vw slope so the size grows smoothly between your two viewport widths and never goes beyond the minimum or maximum.

    Why does the output use rem instead of px?

    rem values scale with the font size the visitor chose in their browser, so people who increase their default text size still get larger text. Pixel values ignore that setting. The root font size field only controls how pixels are converted to rem and should match your html font size, which is 16px by default.

    Can I use the result in Tailwind?

    Yes. Choose the Tailwind export to get a theme.fontSize object for tailwind.config.js. For Tailwind 4, export CSS custom properties and place them inside an @theme block.

    Is my data sent anywhere?

    No. Everything is calculated in your browser and nothing is uploaded. Your settings are kept in the page address so you can bookmark or share a scale.