Modular Type Scale Generator
Generate a modular typographic scale with px/rem sizes, CSS custom properties and a Tailwind fontSize config.
About this tool
The Modular Type Scale Generator builds a full typographic scale from a base size and a ratio using size(n) = base × ratio^n. It is for designers and front-end developers who want a consistent, mathematically harmonious set of font sizes. Configure base, ratio (number or named), how many steps up and down, the output unit and root size, then copy the table, CSS custom properties (--font-size-N) or the Tailwind fontSize object.
Frequently asked questions
What is a modular type scale?
A modular scale derives every font size from a single base size multiplied by a ratio raised to a step number, so size(n) = base × ratio^n. This keeps headings and body text in harmonious proportion.
Which ratios can I use?
Enter any number (e.g. ratio=1.25) or a named musical ratio: minor-second 1.067, major-second 1.125, minor-third 1.2, major-third 1.25, perfect-fourth 1.333, augmented-fourth 1.414, perfect-fifth 1.5, or golden 1.618.
How do px and rem relate here?
rem values are computed by dividing the px size by the root font size (default 16px). Set root=16 to match the browser default; change it if your html element uses a different base.