Typography Scale Generator
NewBuild a modular type scale from a base size and ratio, with generated CSS custom properties.
Scale settings
Choose a base size, ratio, and number of steps above and below body text.
Scale preview
0 stepsGenerated CSS custom properties
0 linesFrequently Asked Questions
Does this output px values or CSS-ready rem variables?
The generated code uses rem-based custom properties. Each line also includes the computed px value as an inline comment so you can see both units at once.
Why do the rem numbers look tied to 16px even if I choose a different base size?
Because the conversion to rem always divides by 16 internally. Your chosen base size changes the scale before conversion, but the rem output assumes a 16px root when it calculates the numeric rem value.
Can I enter any ratio I want?
No freeform ratio field exists here. You pick from six built-in presets: 1.067, 1.125, 1.2, 1.25, 1.333, or 1.618.
What ranges can I set for the scale?
Base font size is clamped to 12-24px, steps up to 1-8, and steps down to 1-6. If you type something outside those ranges, the script snaps it back into bounds.
What exactly gets copied with Copy CSS?
It copies the whole generated textarea output: the :root custom properties plus the example utility classes like .text-body and the step-based helper classes.