Typografie-Skalen-Generator

Erstellen Sie konsistente Schriftgrößenskalen für moderne Web-Design-Systeme basierend auf klassischen Proportionen.

Skalen-Einstellungen

Basis-Schriftgröße

Skalen-Verhältnis

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

Eigenes Verhältnis

Enter to override preset

Einheit

Vorschau-Schriftart

Hierarchie-Vorschau — 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.