Font Scale Calculator

Create harmonious typography with our font scale calculator. Choose from popular ratio presets like the golden ratio, perfect fourth, or create your own custom scale.

Scale Settings

Colors & Contrast

Contrast Ratio:0:1
WCAG Level:Fail (All Text)

Output

:root {
  --font-base-size: 16px;
  --font-scale-ratio: 1.25;

}

Type Scale Preview

About the Font Scale Calculator

The Font Scale Calculator helps you create harmonious typography systems for your web projects by generating a consistent type scale based on mathematical ratios. This approach to typography creates visual hierarchy and rhythm that makes your designs more professional and readable.

What is a Type Scale?

A type scale is a progression of font sizes that follow a specific ratio, creating a harmonious relationship between different text elements on your page. Instead of randomly choosing font sizes, a type scale ensures that each size relates mathematically to the others, creating visual consistency and hierarchy.

How the Font Scale Calculator Works

  1. Choose a base font size (typically your body text size)
  2. Select a ratio from our presets or enter a custom ratio
  3. The calculator generates a complete type scale with multiple sizes
  4. Preview the visual hierarchy with sample text
  5. Copy the generated CSS variables for use in your project
  6. Check WCAG contrast compliance for accessibility

Popular Type Scale Ratios

Golden Ratio (1.618)

Based on the famous mathematical ratio found throughout nature and classical design. The golden ratio creates a dramatic, dynamic scale with significant size differences between steps.

Perfect Fourth (1.333)

Based on the musical interval, this ratio creates a moderate, balanced progression that works well for most web projects, offering good hierarchy without extreme size jumps.

Major Third (1.25)

A subtle ratio that creates gentle size progression, ideal for designs that need hierarchy without dramatic size differences. Works well in space-constrained interfaces.

Minor Second (1.067)

The most subtle ratio, creating very small increments between sizes. Useful for minimal designs or when you need many steps in your hierarchy without dramatic size changes.

Benefits of Using a Type Scale

  • Improved readability - Properly scaled typography creates clear visual hierarchy
  • Design consistency - Mathematically related sizes create harmony across your interface
  • Efficient workflow - Eliminate guesswork when choosing font sizes
  • Responsive design - Scale can be implemented with relative units for responsive typography
  • Accessibility - Proper hierarchy helps users scan and understand content structure

Pro Tip

When implementing your type scale with CSS variables, consider using rem units for your base size. This allows users to adjust their browser's default font size while maintaining your carefully designed scale relationships.