Skip to content

Free tool - no signup

Type Scale Calculator

Set a base size and a ratio, and get a modular type scale with a live preview and copy-ready CSS. Headings that relate to each other and to your body text, no eyeballing. It all runs in your browser.

CSS variables
 
 
 
 
How to use it
 
     
  1. Set your base size, usually 16px, which becomes your body text.
    2.  
  2. Pick a ratio. Small for dense UI, large for editorial contrast.
    3.  
  3. Choose how many steps up (headings) and down (captions) you need.
    4.  
  4. Copy the CSS variables and use var(--text-lg) across your components.
    5.  
 
Why a ratio beats hand-picked sizes
 

A pile of sizes chosen by feel (14, 16, 22, 31, 40) reads as noise: the
        jumps are uneven, so headings fight instead of forming a clear order. A
        modular scale fixes the relationship in one number. Every size is the
        base times the ratio to some power, so H1 relates to H2 relates to body
        the same way a musical interval does. The result is a hierarchy your eye
        trusts without knowing why. Ship the tokens once and every heading on
        every page inherits that harmony.

 
Common questions
 
 
What is a modular type scale?
A modular type scale is a set of font sizes generated from one base size multiplied by a fixed ratio. Each step up multiplies by the ratio, each step down divides by it. It gives you headings that relate to the body text and to each other mathematically, instead of eyeballed sizes that clash.
Which ratio should I pick?
Smaller ratios (1.2 to 1.25) suit dense product UI and dashboards where you need many sizes close together. Larger ratios (1.333 to 1.5) create dramatic contrast for editorial and marketing pages. 1.25 (major third) is a safe, versatile default.
Should I use px or rem?
Use rem for font sizes so text respects the user browser setting and stays accessible. The tool shows both: px to sanity-check the visual size, rem for the values you actually ship. Base 16px equals 1rem.
Is it free and private?
Yes. No sign-up, no email, no watermark. The whole calculator runs client-side in your browser, so nothing is uploaded. Copy the CSS variables straight into your stylesheet.
 
 

Type is one pillar of the craft. Pair this with our
web typography and font pairing guide,
        or set your spacing rhythm with the
spacing scale generator.