The mathematical foundation of typographic hierarchy
Every memorable design system—from Apple HIG and Material Design to GitHub Primer and Tailwind—relies on an intentional modular type scale. Understanding how scale ratios, base font sizes, and fluid constraints interact is essential for shipping accessible, professional typography.
Mathematical Rhythm
Multiplying a base size (such as 16px) by a fixed ratio (such as 1.25) ensures each heading step is proportionally linked to body copy.
Optical Balance
As font sizes increase, line height must decrease and letter spacing must tighten to preserve readability and optical cohesion.
Engineering Handoff
Generating semantic design tokens, CSS custom properties, and Tailwind configurations bridges the gap between Figma and production code.
Classical musical intervals & scale ratios
Modular scales are historically derived from musical temperament. Use this guide to select the ratio that best matches your product's density and brand voice.
| Ratio | Name | Best Use Cases | Visual Character |
|---|---|---|---|
| 1.067 | Minor Second | Dense tables, mobile spreadsheets, code editors | Minimal contrast, maximum density |
| 1.125 | Major Second | Enterprise SaaS, multi-pane dashboards, analytics | Compact, functional, controlled |
| 1.200 | Minor Third | Blogs, technical documentation, utility web apps | Balanced workhorse hierarchy |
| 1.250 | Major Third | Corporate landing pages, e-commerce, consumer apps | Confident, clean, clear heading contrast |
| 1.333 | Perfect Fourth | Modern tech startups, media publications, portfolios | Expressive, dynamic, high energy |
| 1.414 | Augmented Fourth (√2) | Graphic design showcases, creative agencies | Geometric harmony based on ISO paper proportions |
| 1.500 | Perfect Fifth | Editorial cover stories, lifestyle brands, luxury retail | Dramatic, commanding display titles |
| 1.618 | Golden Ratio (Φ) | High-fashion branding, architectural magazines, posters | Monumental, classical divine proportions |
Static breakpoints vs. modern fluid clamp() typography
Traditionally, responsive typography relied on CSS media queries at fixed breakpoints (such as 768px or 1024px), causing headings to abruptly jump in size when a browser window was resized.
Static Modular Scale
Computes fixed sizes in REM based on a standard desktop base size (e.g. 16px). Simple, predictable, and fully compatible with legacy CSS frameworks and design tools.
- Deterministic values across all devices
- Requires media queries for smaller mobile screens
Fluid Typography with CSS clamp()
RecommendedLinearly interpolates font sizes between minimum (mobile) and maximum (desktop) viewports using mathematical slopes. Zero breakpoint jumps, flawless fluid scaling.
- Smooth scaling between 375px and 1280px viewports
- Clean CSS clamp() formula ready for production
Pair Fonts → Calculate Scale → Compare Details
Need to pick harmonious typefaces first? Explore Font Pairing Studio for heading and body combinations. Calculate your complete hierarchy here, then open Font Comparison to inspect side-by-side OpenType glyph metrics and variable axes.
Typography Scale Calculator FAQ
What is a typography scale (modular scale)?
A typography scale is a mathematically structured sequence of font sizes generated by multiplying a base size (typically 16px or 1rem) by a consistent geometric ratio. Instead of choosing random font sizes, every heading, paragraph, and caption size shares a deliberate proportional relationship, producing harmonious visual hierarchy across a user interface.
How do I choose the right scale ratio for my project?
Choose a ratio based on content density and emotional tone. For dense enterprise dashboards, data tables, or mobile apps with limited vertical room, compact ratios like Minor Second (1.067) or Major Second (1.125) keep typography compact. For standard marketing websites and SaaS landing pages, Major Third (1.250) or Perfect Fourth (1.333) creates confident contrast. For luxury, editorial, or poster design, steep ratios like Perfect Fifth (1.500) or the Golden Ratio (1.618) deliver dramatic headline impact.
What is fluid typography and how does CSS clamp() work?
Fluid typography scales font sizes smoothly between a minimum viewport width (such as 375px mobile) and a maximum viewport width (such as 1280px desktop) without abrupt breakpoint jumps. Using CSS clamp(min, y + slope * 100vw, max), the browser calculates font sizes dynamically based on the current window width while guaranteeing sizes never shrink below the minimum or grow beyond the maximum.
Why should I use REM units instead of pixels for font sizes?
REM units are relative to the root font size of the document (typically 16px by default). When users adjust their browser's default font size for visual accessibility, layouts built with REM scale proportionally, preserving legibility. Hardcoded pixel values override browser accessibility preferences and fail WCAG accessibility standards.
Why does line height need to change as font size increases?
In professional typography, larger display headings require proportionally tighter line heights (typically 1.05 to 1.2) to prevent unsightly vertical gaps between lines. Conversely, body copy requires generous line height (typically 1.5 to 1.65) to facilitate comfortable horizontal reading tracking without line-jumping.
What is letter-spacing (tracking) compensation in type scales?
As letterforms grow to display sizes, the optical space between characters appears wider. Professional type designers tighten display headlines (typically -0.01em to -0.035em) to maintain word cohesion, while loosening small text and captions (+0.02em to +0.05em) to prevent counters from collapsing.
Can I use custom Google Fonts or upload my own font files?
Yes. FontLeech's Typography Scale Calculator integrates with our verified Google Fonts catalog and allows you to upload local TTF, OTF, WOFF, or WOFF2 files directly in your browser. All file parsing runs 100% locally on your machine—no proprietary font files are transmitted to a server.
How do I export the generated scale to Tailwind CSS?
Click 'Export Code & Tokens' in the top bar and select either the 'Tailwind v4 @theme' tab (for modern CSS-first Tailwind) or the 'Tailwind v3 Config' tab (for JavaScript tailwind.config.js). The generator outputs pre-formatted fontSize objects containing font sizes, line heights, and letter spacing ready to paste into your project.
What are W3C Design Tokens and why are they useful?
The W3C Design Tokens Community Group specification defines a standard JSON format for design decisions. Exporting your typography scale as design tokens enables direct synchronization between Figma design systems and production code using token engines like Style Dictionary.
Can I share my custom typography scale with teammates?
Yes. Click 'Share URL' in the top toolbar to generate a compressed link encoding your base font size, ratio, fluid parameters, and font choices in the URL hash. Your colleagues can open the link to instantly load and edit your exact typography scale without creating an account.