What does this tool do?
The Font Size Scale Generator turns a base size and a modular scale ratio into a consistent typographic scale, then outputs it as copy-ready CSS custom properties. It's a fast way for designers and developers to build a mathematically harmonious size hierarchy between headings and body text.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How a modular scale works
Each step multiplies the base size by the ratio raised to a power: one step up is base times ratio, the next is that again. The tool generates eight steps from xs to 3xl, and you pick from eight classic ratios such as Minor Second (1.067), Major Third (1.250), Perfect Fourth (1.333) or the Golden Ratio (1.618). With a 16px base and a 1.250 ratio, body text is 16px, a subheading 20px, and a heading 25px.
px and rem output
Toggle the output unit with the px/rem button. rem values are computed against a 16px root, so 24px equals 1.5rem. Copy the generated :root block into your stylesheet, then reference variables like --font-lg or --font-2xl directly in font-size. rem is recommended for accessibility because it respects the user's browser font-size preference, scaling your whole type system together.
Frequently asked questions
Which scale ratio should I choose?
For dense interfaces, lower ratios like 1.125–1.200 keep a tight hierarchy; for landing pages and large headlines, higher ratios such as 1.414 or the Golden Ratio (1.618) create more dramatic contrast between steps.
What does --font-base mean in the output?
base is the center step of the scale and equals the base size you entered. xs and sm fall below it, while md through 3xl grow above it by successive multiples of the ratio.
Is Font Size Scale Generator free?
Yes. Font Size Scale Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Font Size Scale Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.