Modular Type Scale is designed for the exact search intent behind “modular type scale calculator”. Generate a typography scale from a base font size and ratio, with proportional steps for headings, body text and smaller type. Generate a typography scale from a base font size and ratio, with proportional steps for headings, body text and smaller type. Formula size(n) = base × ratio^n . Step 0 is the base; positive steps grow and negative steps shrink. CSS output Useful output can include px values and rem equivalents. If converting to rem, the root font-size assumption must be stated rather than silently assuming 16px. Worked example: With base 16px and ratio 1.25, step 3 is 16×1.25³ = 31.25px. Common practical uses include Build heading hierarchies; Create typography tokens; Compare scale ratios; Generate CSS variables. Important limitations: A mathematical scale does not guarantee readable typography. Font metrics differ between typefaces. Rounding and responsive typography may require adjustment. Key questions this page should answer include: What is a modular type scale? A sequence of sizes derived from a base and constant ratio. What is step zero? The base size. How are smaller sizes calculated? Use negative powers or divide by the ratio. Is 1rem always 16px? No; it depends on the root font size. Does a type scale guarantee good typography? No. The page should stay focused on this differentiator: Formula. The tool should appear before the explanatory copy so a visitor can complete the task immediately, then use the supporting content to verify the method and understand the result. The explanation should keep terminology consistent with the calculator or converter interface, because a mismatch between labels in the tool and labels in the content can create confusion and weaken search-intent alignment. Where the calculation or transformation has edge cases, the page should state them directly instead of implying that every input is valid. The worked example should mirror the real inputs accepted by the tool and show enough arithmetic or transformation logic for the result to be independently checked.
How to use this tool
Formula
size(n) = base × ratio^n. Step 0 is the base; positive steps grow and negative steps shrink.
CSS output
Useful output can include px values and rem equivalents. If converting to rem, the root font-size assumption must be stated rather than silently assuming 16px.
Examples
Worked example
With base 16px and ratio 1.25, step 3 is 16×1.25³ = 31.25px.
Common use cases
- Build heading hierarchies
- Create typography tokens
- Compare scale ratios
- Generate CSS variables
Frequently asked questions
What is a modular type scale?
A sequence of sizes derived from a base and constant ratio.
What is step zero?
The base size.
How are smaller sizes calculated?
Use negative powers or divide by the ratio.
Is 1rem always 16px?
No; it depends on the root font size.
Does a type scale guarantee good typography?
No.