Générateur d'échelle typographique

Concevez des échelles de tailles de police harmonieuses pour vos systèmes de design web à l'aide de ratios classiques.

Paramètres de l'échelle

Taille de police de base

Ratio d'échelle

Minor Second

Subtle, minimal contrast

1.067

Major Second

Classic, gentle progression

1.125

Minor Third

Well-balanced, popular choice

1.2

Major Third

Strong hierarchy

1.25

Perfect Fourth

Dramatic, bold difference

1.333

Augmented Fourth

Very dramatic

1.414

Perfect Fifth

Striking contrast

1.5

Golden Ratio

Naturally pleasing

1.618

Ratio personnalisé

Enter to override preset

Unité

Police d'aperçu

Aperçu de la hiérarchie — 1.250

5xl

The quick brown fox

3.8147rem(61px)

4xl

The quick brown fox

3.0518rem(49px)

3xl

The quick brown fox

2.4414rem(39px)

2xl

The quick brown fox

1.9531rem(31px)

The quick brown fox

1.5625rem(25px)

The quick brown fox

1.25rem(20px)

base

The quick brown fox

1rem(16px)

The quick brown fox

0.8rem(13px)

The quick brown fox

0.64rem(10px)

Export Code

:root {
  /* Typography Scale
   * Base: 16px
   * Ratio: 1.25 (Major Third)
   */
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.9531rem;
  --font-size-3xl: 2.4414rem;
  --font-size-4xl: 3.0518rem;
  --font-size-5xl: 3.8147rem;
}

/* Usage Example */
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.heading-1 { font-size: var(--font-size-5xl); }

Understanding Type Scales

What is a Modular Scale?

A modular type scale is a sequence of font sizes derived by multiplying a base size by a consistent ratio. This creates harmonious relationships between text sizes, similar to the intervals in music.

For example, with a base of 16px and ratio of 1.25 (Major Third), the sequence would be: 12.8px → 16px → 20px → 25px → 31.25px, each step exactly 1.25× the previous.

Choosing a Ratio

Smaller ratios (1.067–1.2) create subtle differences, ideal for information-dense UIs like dashboards or documentation.

Medium ratios (1.25–1.333) offer balanced hierarchy, perfect for blogs, landing pages, and marketing sites.

Larger ratios (1.414–1.618) create dramatic contrast, best for posters, presentations, and bold editorial designs.