Typographic Scale Calculator
Create a harmonious and consistent set of font sizes for your project based on a base size and a classic ratio.
Preview
Generated CSS
About This Tool
A typographic scale brings mathematical harmony to your design. Instead of picking font sizes at random, this tool generates a set of consistent sizes (for H1, H2, paragraph text, etc.) based on a starting base size and a selected musical or mathematical ratio (like the Golden Ratio). This ensures your text hierarchy is logical and visually pleasing.
How to Use
- Enter your desired base font size in pixels (this is typically your main paragraph size).
- Select a scale ratio from the dropdown. 'Perfect Fifth' and 'Golden Ratio' are popular choices.
- The tool will instantly generate a live visual preview of the scale.
- The corresponding CSS variables for the generated scale are provided in the code box for you to copy and use in your project.
Frequently Asked Questions (FAQs)
Why should I use a typographic scale?
It creates a more professional, intentional, and rhythmic design. It establishes a clear visual hierarchy, guiding the user's eye through the content logically.
Can I use units other than pixels?
This tool generates pixel-based values for simplicity, but you can easily convert them to `rem` or `em` units in your own stylesheet for better scalability and accessibility.