Typography Scale Calculator
Build a consistent heading hierarchy.
Enter a base font size and pick a scale ratio to generate a complete modular type scale, from H1 down to small text, with a matching CSS snippet.
1.250
h1The quick brown fox39.06pxh2The quick brown fox31.25pxh3The quick brown fox25.00pxh4The quick brown fox20.00pxh5The quick brown fox16.00pxpThe quick brown fox16.00pxsmallThe quick brown fox12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}How to build a type scale
- Enter your base font size in pixels.
- Choose a scale ratio, or select Custom to set your own.
- Review the generated sizes for each heading level.
- Copy the CSS variables and rules into your stylesheet.
Frequently asked questions
Which ratio should I choose?
1.125 and 1.2 give subtle, close-knit scales; 1.333 and 1.618 create more dramatic contrast. Use 1.2 to 1.25 for most websites.
Why is the H1 preview capped?
Very large sizes are capped in the preview for display purposes only; the CSS output keeps the exact calculated value.
Can I use this with rem units?
Yes. Divide the pixel values by your root font size, or replace px with rem in the generated CSS.