Skip to main content
FreeToolkit .ai

Create Your Modular Typography Scale Generate a modular typographic scale with customizable base size, ratio, and units.

Typography Scale Generator illustration
🎨

Typography Scale Generator

Generate a modular typographic scale with customizable base size, ratio, and units.

1

Set base size and ratio

Choose the base font size and a mathematical scale ratio for the progression.

2

Configure output

Select the unit (px, rem, em), line height, and number of scale steps.

3

Copy the CSS

Preview the type scale and copy the CSS custom properties.

Loading tool...

What Is Typography Scale Generator?

The Typography Scale Generator creates a harmonious set of font sizes based on a mathematical ratio, also known as a modular scale. Consistent typography is fundamental to good design, and modular scales provide font sizes that naturally relate to each other through mathematical proportion. This tool offers eight classic scale ratios: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), and the Golden Ratio (1.618). Starting from a base size, each step is multiplied by the chosen ratio. The output includes named CSS custom properties (--font-size-xs through --font-size-5xl) in your preferred unit, along with a visual preview showing each size with sample text.

Why Use Typography Scale Generator?

  • Eight classic mathematical scale ratios from music and design theory
  • Output in px, rem, or em units for different project needs
  • Adjustable base size, line height, and number of steps
  • CSS custom properties output for easy integration

Common Use Cases

Design System Typography

Establish a consistent type scale as the foundation of a design system.

New Project Setup

Generate harmonious font sizes when starting new web projects.

Blog and Article Styling

Create a readable typographic hierarchy for long-form content.

Responsive Typography

Generate scale values to use across different responsive breakpoints.

Technical Guide

A modular type scale uses a mathematical ratio to generate a series of proportional values. Starting with a base size (typically 16px for web), each step is calculated by multiplying by the ratio. For a Major Third (1.25) scale with 16px base: 12.8px, 16px, 20px, 25px, 31.25px, 39.06px. The ratio determines the contrast between sizes—smaller ratios (1.067, 1.125) create subtle differences ideal for body text, while larger ratios (1.5, 1.618) create dramatic differences suitable for display typography. Popular ratios come from music theory (Minor Third, Perfect Fourth, Perfect Fifth) and mathematics (Golden Ratio). For web implementation, define sizes as CSS custom properties and use them throughout the stylesheet. rem units are preferred for accessibility as they respect the user's font size preferences. Line height should generally decrease as font size increases—1.5 for body text and 1.1-1.2 for large headings.

Tips & Best Practices

  • 1
    Use Major Third (1.25) or Perfect Fourth (1.333) for most web projects
  • 2
    Use rem units for accessible, user-preference-respecting typography
  • 3
    Decrease line-height for larger headings (1.1-1.2) and increase for body (1.5-1.7)
  • 4
    Stick to 5-7 scale steps for a manageable typographic hierarchy

Related Tools

Spacing Scale Generator - free online tool

Spacing Scale Generator

Generate a consistent spacing scale system with customizable base unit and multipliers.

🎨 CSS & Design
Google Fonts Preview - free online tool

Google Fonts Preview

Preview Google Fonts with customizable text, size, weight, and letter spacing.

🎨 CSS & Design
CSS Variable Generator - free online tool

CSS Variable Generator

Generate CSS custom properties (variables) for colors, spacing, and typography.

🎨 CSS & Design
CSS Box Shadow Generator - free online tool

CSS Box Shadow Generator

Generate CSS box shadows with multiple layers, inset options, and real-time preview.

🎨 CSS & Design

Frequently Asked Questions

Q What is a modular scale?
A modular scale is a series of numbers that relate to each other through a consistent mathematical ratio, creating visual harmony.
Q Which ratio should I choose?
Major Third (1.25) works well for most projects. Use smaller ratios for subtle hierarchies and larger for dramatic contrasts.
Q Should I use px or rem?
rem is recommended as it respects user font size preferences, improving accessibility.
Q How many scale steps do I need?
5-7 steps cover most needs: xs, sm, base, lg, xl, 2xl, 3xl.
Q Can I use different scales for mobile and desktop?
Yes, use media queries to switch between a smaller ratio on mobile and a larger ratio on desktop.

About This Tool

Typography Scale Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.