Generate a harmonious typographic scale for your designs using modular scale ratios. Preview sizes and export CSS custom properties.
Type Scale Preview
Common Scale Ratios
🎵 Why musical ratios? Typographic scales are borrowed from music theory — the same proportions that create harmonic intervals create visually pleasing size relationships. The Perfect Fourth (1.333) and Major Third (1.250) are popular for UI design as they create clear but not jarring hierarchy.
📱 Mobile vs desktop: Use a smaller ratio (Minor Second 1.067 or Major Second 1.125) for mobile designs where space is tight. Use a more dramatic ratio (Perfect Fourth 1.333 or Golden Ratio 1.618) for large-screen or editorial layouts where you want strong visual hierarchy.
♿ Accessibility: The WCAG recommends a minimum base font size of 16px for body text. Never set base body text smaller than 14px. Ensure sufficient contrast between heading levels — more than just size differentiation.