Home›Font Explorer›Typography Scale

📐 Typography Scale

Generate harmonious type scales based on musical and mathematical ratios. Preview sizes and copy CSS variables.

Ad Slot — Below Header (728×90 Leaderboard)
px
CSS Variables 

    

  


  
  
  
  

    
Related Tools You Might Like

    

      
        Fonts
        Font Pairing Guide
        →
      
      
        Fonts
        Web Font CSS Generator
        →
      
      
        Fonts
        Google Fonts Browser
        →
      
    

  


  
  
  
Ad Slot — Mid Content (Responsive In-Article)

  

    

      

        💡
        
What Is This?

      

      
  • Calculate harmonious typography scales using math ratios
  • Supports minor third, major third, perfect fourth, golden ratio
  • Generates complete h1–body type scale with line heights
  • Responsive scale preview for different breakpoints
  • Copy the full CSS type scale for your project

    

    

      

        🛠️
        
How to Use

      

      
  1. Set your base font size (typically 16px or 18px)
  2. Choose a scale ratio — minor third, major third, perfect fourth, golden ratio
  3. Preview the generated type scale from h1 through body text
  4. Adjust line-height and letter-spacing for each level
  5. Copy the complete CSS type scale for your project

    

    

      

        🎯
        
Use Cases

      

      
  • Establishing consistent typography hierarchies for websites
  • Creating design system type scales with mathematical ratios
  • Ensuring heading sizes follow harmonious proportions
  • Generating responsive type scales for different breakpoints
  • Building accessible, readable text sizing for all content

    

  



  
Ad Slot — Bottom (300×250 Rectangle)