Typography Scale Calculator
Generate a harmonious typographic scale based on mathematical ratios for consistent and balanced designs
How It Works
Base Size
Start with your body text size, typically 16px for optimal readability on the web.
Scale Ratio
Choose a mathematical ratio to create harmonious relationships between type sizes.
Scale Steps
Define how many steps up and down from your base size to generate.
Scale Generator
Adjust the controls to create your perfect type scale.
Classic web typography ratio, creates natural progression
Show in REM
Implementation
Copy the generated code for your preferred styling method.
1:root {
2 --text-fine: 0.422rem; /* 6.76px | Fine Print */
3 --text-caption: 0.563rem; /* 9.00px | Caption */
4 --text-small: 0.750rem; /* 12.00px | Small */
5 --text-body: 1rem; /* 16px | Body */
6 --text-subheading: 1.333rem; /* 21.33px | Subheading */
7 --text-heading: 1.777rem; /* 28.43px | Heading */
8 --text-display: 2.369rem; /* 37.90px | Display */
9}