Typography Scale Generator

Create harmonious typography scales with base size and ratio

Base Size (px)

Scale Ratio

Visual Preview

The quick brown fox

h1 - 49px

The quick brown fox

h2 - 39px

The quick brown fox

h3 - 31px

The quick brown fox

h4 - 25px

The quick brown fox

h5 - 20px

The quick brown fox

h6 - 16px

The quick brown fox

body - 16px

Size Reference

h149px

h239px

h331px

h425px

h520px

h616px

body16px

small13px

tiny10px

CSS Code

h1 { font-size: 49px; }
h2 { font-size: 39px; }
h3 { font-size: 31px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
body { font-size: 16px; }
small { font-size: 13px; }
tiny { font-size: 10px; }

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        "h1": "49px",
        "h2": "39px",
        "h3": "31px",
        "h4": "25px",
        "h5": "20px",
        "h6": "16px",
        "body": "16px",
        "small": "13px",
        "tiny": "10px"
}
    }
  }
}