📐 Typography Scale
Generate harmonious type scales based on musical and mathematical ratios.Copy CSS variables
px
CSS Variables
What Is This?
- Calculate harmonious typography scales using math ratios
- Supports minor third, major third, perfect fourth, golden ratio
- Generates complete h1–body type scale with line heights
- Responsive scale preview for different breakpoints
- Copy the full CSS type scale for your project
How to Use
- Set your base font size (typically 16px or 18px)
- Choose a scale ratio — minor third, major third, perfect fourth, golden ratio
- Preview the generated type scale from h1 through body text
- Adjust line-height and letter-spacing for each level
- Copy the complete CSS type scale for your project
Use Cases
- Establishing consistent typography hierarchies for websites
- Creating design system type scales with mathematical ratios
- Ensuring heading sizes follow harmonious proportions
- Generating responsive type scales for different breakpoints
- Building accessible, readable text sizing for all content