A
AiTechWorlds
AiTechWorlds
Generate a modular type scale (base size × ratio) as CSS custom properties, with a live preview.
:root {
--font-base: 1.000rem;
--font-lg: 1.250rem;
--font-xl: 1.563rem;
--font-2xl: 1.953rem;
--font-3xl: 2.441rem;
--font-4xl: 3.052rem;
}100% in-browser — generates a modular type scale (base size × ratio^step) as CSS custom properties, a common approach to consistent, harmonious heading/body sizes. All math runs locally, no data leaves your device.
Typography Scale Generator computes a modular type scale by multiplying a base font size by a chosen ratio (Minor Second through Golden Ratio) raised to increasing powers, producing a harmonious set of heading/body sizes exported as CSS custom properties.
Set a base size and pick a ratio
Common musical-interval ratios like 1.25 or 1.333.
Choose how many steps to generate
From xs up through larger headings.
Copy the CSS custom properties
Drop into your stylesheet's :root.
100% Private — No Server Required
All processing happens directly in your browser. No data is uploaded, stored, or transmitted to any server.
Last reviewed on July 24, 2026 by the AiTechWorlds Tools Team. All processing runs locally in your browser.
Advertisement