Typography Scale Generator
Create harmonious typography scales with base size and ratio
Base Size (px)
| Scale Ratio | Value |
|---|---|
| Minor Second | 1.067 |
| Major Second | 1.125 |
| Minor Third | 1.200 |
| Major Third | 1.250 |
| Perfect Fourth | 1.333 |
| Augmented Fourth | 1.414 |
| Perfect Fifth | 1.500 |
| Golden Ratio | 1.618 |
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
| Element | Size |
|---|---|
| h1 | 49px |
| h2 | 39px |
| h3 | 31px |
| h4 | 25px |
| h5 | 20px |
| h6 | 16px |
| body | 16px |
| small | 13px |
| tiny | 10px |
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"
}
}
}
}