Modular Scale Generator
Generate a consistent type scale from a base size and ratio
Pick a base font size and a ratio — golden ratio, perfect fifth, and more — and this tool builds a nine-step type scale from XS to 5XL, previewing every step live as you tweak it. It's made for designers and front-end developers setting up a website's typographic system, and the output comes ready to copy as CSS custom properties or a Tailwind CSS config block you can drop straight into your project. Everything runs in your browser; nothing is sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Enter your base font size in pixels.
- Choose a ratio from the list, anywhere from 1.067 (minor second) up to 2.000 (octave).
- Swap in your own preview text to see how each step reads at its real size.
- Use the copy button to grab the generated CSS variables or Tailwind config and drop them into your project.
FAQ
- Which modular scale ratio should I pick?
- Text-dense sites usually work best with a tighter ratio like 1.125 or 1.25, while landing pages that need dramatic headline contrast suit 1.5 or the golden ratio (1.618). The live preview is the fastest way to compare them side by side.
- Why is the output in rem instead of px?
- rem respects the reader's default browser font size, which is better for accessibility, and it's the standard unit for responsive typography. The equivalent px value is shown alongside each step for reference.
- How do I use these values in a real project?
- Copy the CSS variables and paste them into your :root block, or copy the Tailwind output into the fontSize section of your tailwind.config file — either one works right away.