How to Generate a CSS Typography Scale
Use the Typography Scale tool to create a harmonious modular type scale and export it as CSS custom properties.
Tool Used
Typography Scale
Set your base font size
Enter your base size — 16px is the browser default and a good starting point for body text. All other sizes in the scale are calculated relative to this value.
Choose a scale ratio
Select a ratio from the presets: Perfect Fourth (1.333) creates a clear hierarchy for UI, while Major Third (1.25) produces a more subtle, content-focused scale.
Adjust the number of steps
Set how many steps above the base (for headings) and below (for small text and captions) you need. Most projects work well with 4-5 steps above and 2 below.
Toggle units and preview
Switch between rem and px output and view each step with sample text to verify the scale looks right before copying it.
Copy the CSS output
Paste the CSS custom properties output into your :root block for immediate use, or use the Tailwind config snippet if you are integrating with a Tailwind project.
All done!
You are ready to use Typography Scale like a pro.