Typography Scaler

A typographic scale is a sequence of font sizes derived by multiplying a base size by a consistent ratio. This creates a natural visual hierarchy where each step feels proportionally related, similar to intervals in music.

The Formula

Each step in the scale is calculated as: base × ration, where n is the step number (0 for the base, positive for larger sizes, negative for smaller).

Common Ratios

• Minor Second (1.067): Very subtle differences between steps. Good for dense interfaces with many text levels
• Major Second (1.125): Gentle progression. Popular for body-heavy content like articles and documentation
• Minor Third (1.200): Moderate contrast. A versatile choice that works for most web projects
• Major Third (1.250): Clear hierarchy with distinct steps. Works well for marketing pages
• Perfect Fourth (1.333): Strong contrast between sizes. Good for bold, expressive designs
• Golden Ratio (1.618): Dramatic progression based on the golden ratio. Best for designs with few heading levels

Tips

• Smaller ratios (1.067–1.200) work best for applications and dense UIs
• Larger ratios (1.333–1.618) suit editorial and marketing pages with fewer levels
• Use rem units in production so sizes scale with the user's browser font size preference
• You can round values to keep your CSS cleaner without noticeable visual difference
• Consider using CSS custom properties for easy theming and responsive adjustments

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.