The Modular Scale Calculator is a typography design tool that automatically creates harmonious font size systems based on mathematical ratio relationships. Choose from classic ratio factors to get a complete font hierarchy from small text to large headings.
Type scales originate from musical interval relationships. Each ratio factor corresponds to a musical interval: 1.25 is a Major Third (4 semitones), 1.333 is a Perfect Fourth (5 semitones), 1.618 is the Golden Ratio. These ratios produce visually harmonious hierarchies because adjacent levels maintain consistent mathematical relationships. Modern design systems (Material Design, Apple HIG) use similar type scale systems.
A type scale is a sequence of font sizes based on mathematical ratio relationships, creating a harmonious typography system through consistent scaling. Common ratios include Golden Ratio (1.618), Major Third (1.25), and Perfect Fourth (1.333).
Choose based on design needs: 1.067 for compact UIs, 1.2 for content-dense sites, 1.25 as a versatile choice, 1.333 for heading-emphasized designs, 1.618 for bold brand pages. Larger ratios create stronger hierarchy.
Copy the CSS variables into your stylesheet and reference them with var(--font-size-sm). For example: h1{font-size:var(--font-size-3xl)}, p{font-size:var(--font-size-base)}.
rem (root em) is relative to the root element font size. 1rem equals the html element's font-size (default 16px). Benefits: respects user browser font settings, enables global scaling, avoids em nesting issues.
Copy the generated Tailwind config into tailwind.config.js under theme.extend.fontSize to use classes like text-xs, text-sm, text-base with your custom scale values.