Skip to content

Typography Scale Calculator

Create a fluid or modular typography scale from a base size and ratio. See live preview and copy the CSS.

Generated CSS
 
 
 
       
 
  
How to use the Typography Scale Calculator
 
     
  1.   
    Choose a base font size and a ratio.
     
  2.   
    Preview each scale step at actual size.
     
  3.   
    Copy the generated CSS or config.
     
    4.  
  
What is a type scale?
 
A typography scale is a sequence of font sizes that follow a consistent ratio — like the Major Third (1.25), Perfect Fourth (1.333), or Golden Ratio (1.618). Using a mathematical scale creates visual harmony and saves you from choosing arbitrary sizes. This tool generates the scale, shows each step rendered at size, and outputs ready-to-use CSS.
  
Key features
 
     
  •   8 preset ratios plus custom ratio input 
  •   Live preview of each scale step at its actual size 
  •   Copy as CSS custom properties, Tailwind config, or SCSS 
  •   Adjustable base size (px or rem) 
    •  
  
Frequently asked questions
 
 
  Which ratio should I choose?   
Major Third (1.25) works for most sites. Perfect Fourth (1.333) for more contrast. Golden Ratio (1.618) for dramatic headlines.
 
  Should I use px or rem?   
rem is generally recommended for accessibility — it respects the user's browser font size settings.
 
  Is my design saved?   
No. Everything runs locally in your browser.
 
 
 
   
     
 
 
 
More tools
 Browse all → 
 
  
   
 
Spacing Scale Generator
 
Consistent spacing system
  
   
 
Favicon Generator
 
Image → favicon.ico + all sizes
  
   
 
Placeholder Image Generator
 
On-the-fly placeholder images
  
   
 
CSS Gradient Generator
 
Linear & radial gradients
  
   
 
Box Shadow Generator
 
Visual CSS box-shadow
  
   
 
Border Radius Generator
 
Visual border-radius & blobs