Typography Modular Scale Generator
Generate a consistent font-size scale from a base size and ratio
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool calculates nine harmonious font sizes, from XS to 5XL, based on a base font size and a chosen ratio like the Golden Ratio or Perfect Fifth, with a live visual preview. It's built for designers and front-end developers who want a systematic type scale for a website, and the output can be copied directly as CSS custom properties or a Tailwind CSS config. Everything runs in your browser, with no data sent to a server.
How to use
- Enter your base font size in pixels.
- Pick a scale ratio from the list, ranging from 1.067 (Minor Second) to 2.000 (Double/Octave).
- Type your own sample text to see how each step actually renders.
- Copy the generated CSS variables or Tailwind config and paste it into your project.
FAQ
- Which ratio should I choose?
- Smaller ratios like 1.125–1.25 work well for text-dense interfaces, while larger ones like 1.5 or the Golden Ratio (1.618) suit landing pages with bold heading contrast. Use the live preview to compare directly.
- Why are the values shown in rem instead of px?
- rem respects the user's browser font-size setting, which is better for accessibility and is the standard unit for responsive typography. A reference px value is shown alongside each rem value.
- How do I use the output in my project?
- Paste the CSS variables into your :root block, or drop the Tailwind config output into the fontSize section of your tailwind.config file.