This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Calculate fluid clamp() font sizes that scale with viewport width. Generate CSS clamp formulas for accessible, responsive typography across breakpoints.
Calculate golden ratio proportions and phi-based dimensions. Apply 1.618 spacing, layout segments, and typography sizes for balanced visual composition.
Generate icon grid and alignment guides for pixel-perfect icon design. Preview square, circle, and keyline grids for consistent app and UI icon systems.
A modular scale is a sequence of numbers that relate to one another through a consistent ratio. Used in typography to create harmonious font size hierarchies.
Size[n] = Base × Ratio^n; where n is the scale step (negative for smaller, positive for larger)Popular typographic ratios: Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414 = √2), Perfect Fifth (1.5), Golden Ratio (1.618).
Updated: July 2026
Generate a type scale from 16px base using 1.333 ratio for heading hierarchy.
→ Sizes: 16, 21.3, 28.4, 37.9, 50.5, 67.3 px
Create a spacing system from 8px base using the golden ratio.
→ Sizes: 8, 12.9, 20.9, 33.9, 54.8 px
Ratios above 1.5 create extreme jumps between sizes. For web content with multiple heading levels, use 1.2–1.333. Reserve larger ratios for editorial/display design.
Raw scale outputs are irrational numbers. Round to nearest pixel or practical rem value (0.125rem increments) for implementation. Sub-pixel sizes cause rendering inconsistency.
Calculate typographic modular scale ratios and font sizes. Build harmonious type hierarchies with musical ratios for headings, body text, and captions. It applies the modular scale (Size[n] = Base × Ratio^n; where n is the scale step (negative for smaller, positive for larger)). For example: typography scale with perfect fourth — Generate a type scale from 16px base using 1.333 ratio for heading hierarchy.