Tailwind Typography Scale Generator
Generate a complete font-size scale for Tailwind CSS — compatible with Tailwind CSS v3 & v4
- Home
- > Tailwind >
- Typography Scale
Scale Settings
Preview
| Level | Font Size | Line Height | Tracking | Sample |
|---|
tailwind.config.js (fontSize)
What is a Typography Scale?
A typography scale (or type scale) is a sequence of font sizes that create a consistent, harmonious progression from small to large text. Tailwind CSS uses a modular scale based on a base size (typically 16px) and a ratio. Each level is calculated as base × ratiolevel.
This tool generates the complete fontSize configuration for your tailwind.config.js using Tailwind's array syntax: ['size', { lineHeight, letterSpacing }].
How to Use This Generator
- Set base size — The default font size (usually 16px) from which all other sizes are calculated.
- Choose a ratio — Pick a preset ratio (Minor Second 1.125 to Perfect Fifth 1.5) or enter a custom value.
- Set the range — Choose the minimum and maximum scale levels.
- Preview the scale — See all levels with their computed values and a sample text preview.
- Copy the config — Copy the generated
tailwind.config.jssnippet with one click.
