toololis
🔤

Typography Scale Calculator

Modular scale — rem + px + line-height

Scale preview
 
   
  
  
  
 
  
 📚 
 
Learn more — how it works, FAQ & guide
 
Click to expand
 
 
   
 
 
Typography scale calculator
 
Build a harmonious type scale. Modular scale, base size × ratio.
 
How to use this tool
  1. 1
    Pick base size
    Usually 16px (1rem). Start here.
  2. 2
    Pick scale ratio
    Common: 1.125 (Major Second), 1.25 (Major Third), 1.333 (Perfect Fourth), 1.5 (Perfect Fifth).
  3. 3
    Copy output
    CSS vars, Tailwind config, raw values.
 
Frequently Asked Questions
Which ratio should I use?
1.125 (Major Second): subtle scale, business UI. 1.2 (Minor Third): versatile. 1.25 (Major Third): balanced, very popular. 1.333 (Perfect Fourth): editorial. 1.5 (Perfect Fifth): dramatic hero scale. 1.618 (Golden): classic.
Why modular scale?
Mathematical harmony — each size relates to the next by a consistent ratio. This creates visual rhythm. Opposite: random sizes picked ad-hoc create visual chaos.
 
 
 
 
  
 

You might also like

  
 
Percentage Calculator
 
Calculate percentages, increases, decreases & more
 
 
 Open  
    
 
Age Calculator
 
Calculate exact age in years, months, days, hours
 
 
 Open  
    
 
BMI Calculator
 
Body Mass Index — metric and imperial
 
 
 Open  
  
 
  
 
 
🔒
 
 100% Privacy. This tool runs entirely in your browser. Your data is never uploaded to any server.