About This Tool
A typographic scale (or modular scale) is a sequence of font sizes that grow or shrink according to a consistent ratio. This typography scale calculator lets you pick a base font size and a scale ratio — from the subtle minor second (1.067) to the dramatic perfect fifth (1.5) — and instantly preview every heading level from h1 through small.
A well-chosen type scale brings rhythm and hierarchy to your designs. Instead of guessing font sizes for each heading, a modular scale ensures every size relates mathematically to every other size. This tool outputs the computed pixel values alongside a preview of each level, then compiles the full set into ready-to-use CSS declarations so you can drop them straight into your project.
Common Use Cases
- Establishing a consistent visual hierarchy across headings, body text, and captions in web layouts
- Rapidly prototyping typographic systems for landing pages, blogs, dashboards, and documentation sites
- Teaching design principles and modular scale theory in workshops or classroom settings
- Generating production-ready CSS font-size values that maintain proportional spacing across breakpoints
- Comparing different scale ratios side-by-side to find the right rhythm for a brand or project
Pro Tips
- Start with a major third (1.25) ratio for a balanced, musical scale that works well on most content-heavy sites like blogs and news pages
- Use a narrower ratio like major second (1.125) for dense dashboards or data-heavy UIs where you want subtle size differences
- Pair a wide scale (perfect fourth or perfect fifth) with generous line-height and whitespace for striking hero sections and marketing pages
- Bookmark the generated URL to save your base size and ratio combination — all settings are encoded in the query string for easy recall
Frequently Asked Questions
- What is a typographic scale?
- A typographic scale is a set of font sizes that follow a geometric progression — each step is multiplied by a fixed ratio. The resulting sizes create visual harmony because every heading and body size is mathematically related. For example, with a 16px base and a 1.25 (major third) ratio, an
h1 at step 6 would be 16 × 1.25⁶ ≈ 61px. - Which ratio should I use for my website?
- It depends on your content density. Minor third (1.2) and major third (1.25) are excellent all-purpose choices for blogs and articles. Perfect fourth (1.333) creates a more dramatic contrast suited for marketing pages. Minor second (1.067) works well for tight UI layouts like dashboards. Try each ratio with this tool and see which feels right.
- How do I apply the generated CSS to my project?
- Click the Copy CSS button to copy all the font-size declarations at once. Paste them into your stylesheet and adjust the selectors as needed. The output assigns each level to the matching HTML tag —
h1 through h6, body, and small — so you can use the declarations as-is or map them to your own CSS classes. - Is this typography scale generator free to use?
- Yes, it is completely free with no sign-up required. Everything runs in your browser — your settings are never sent to a server. You can also share or bookmark the URL, which encodes your base size and ratio for easy recall.
Part of the FreeQ.One tools suite.