Modulares Typenskala — Die Mathematik hinter jeder Font-Größe in einem Designsystem

Sie haben die Vorschau angestarrt. Die Schriftgrößen sind 14px, 16px, 18px, 24px, 32px, 48px. Nichts sieht falsch aus, genau — und dennoch fühlt sich etwas leicht ungleich aus. Die Übergänge zwischen den Größen sind nicht gleichmäßig. Der Überschriftstext ist zu nah an den Untertitel. Der kleine Beschriftungstext fühlt sich von dem Körpertext abgekoppelt. Sie haben Zahlen gewählt, die gerundet und vernünftig erscheinen, und Sie fragen sich, warum das Ergebnis ein wenig willkürlich wirkt. Es ist willkürlich. Das ist das Problem.

Es stellt sich heraus, dass die menschliche Wahrnehmung von Größendifferenzen annähernd logarithmisch ist. Wir erkennen den Unterschied zwischen 16px und 32px nicht als „doppelt“ — wir erkennen ihn als einen Schritt. Um eine Typografie zu schaffen, die sich proportional konsistentfühlt, müssen die Abstände zwischen Ihren Größen eine Verhältnisfolge, nicht eine arithmetische Folge, befolgen. Das ist die Idee hinter einer modularen Skala.

Was eine modulare Skala tatsächlich ist

Eine modulare Skala ist eine Folge von Zahlen, die durch wiederholtes Multiplizieren eines Basiswerts mit einem festen Verhältnis gebildet wird. Die Formel lautet:

size = base × ratio^n

Wo n ist die Schrittzahl (0 für Basis, positiv für größer, negativ für kleiner). Mit einer Basis von 16px und einem Verhältnis von 1.25 (die große Terz), erhalten Sie:

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (Basis)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

Jeder Schritt ist genau 25% größer als der vorherige. Die visuellen Sprünge fühlen sich konsistent an, weil sie konsistent sind — geometrisch. Vergleichen Sie das mit , wo die Sprünge 14, 16, 18, 24, 32, 48sind. Wild ungleichmäßig verteilte Abstände, verkleidet als gerundete Zahlen. +2, +2, +6, +8, +16Die benannten Verhältnisse (und wann sie sinnvoll sind)

Die Namen stammen aus westlichen Musikintervallen, die dieselben mathematischen Beziehungen aufweisen. Hier ist die praktische Ausrichtung:

1.067 — Kleine Sekunde:

• Sehr eng. Die Schritte sind kaum erkennbar. Geeignet für feine Abstände im Körpertext innerhalb eines einzelnen Komponenten, nicht für Überschriftshierarchien. 1.125 — Große Sekunde:
• Subtil. Gut für dichte UIs, bei denen Unterschiede ohne Dramatik benötigt werden — denken Sie an Datenlisten, Dashboards. 1.25 — Große Terz:
• Das ideale Verhältnis für die meisten Web-UIs. Genügend Kontrast zwischen den Ebenen, um die Hierarchie klar zu erkennen, ohne dass Überschriften zu groß wirken. Am häufigsten in Designsystemen verwendet. 1.333 — Perfekte Quarte:
• Sauber und weit verbreitet. Verleiht Überschriften etwas mehr Autorität. Funktioniert gut, wenn Sie eine klare typografische Hierarchie mit wenigen Schritten benötigen. 1.414 — Erhöhte Quarte (√2):
• Auch das Seitenverhältnis von A4-Papier. Dramatischer als die perfekte Quarte, gut für editorialische Inhalte. 1.5 — Perfekte Quinte:
• Starke Kontraste zwischen den Ebenen. Überschriften fühlen sich groß und stark an. Funktioniert für editorialische Layouts, Landingpages, alles, wo Anzeigetext eine Aussage machen muss. 1.618 — Goldene Verhältnis:
• In der Theorie schön, in der Praxis aggressiv. Zwei Schritte über dem Körpertext und bereits der Überschrift ist enorm. Verwenden Sie es nur für Anzeigeelemente, nicht für vollständige UI-Hierarchien. Für einen Frontend-Entwickler, der ein Produkt-UI erstellt, reicht die große Terz (1.25) oder die perfekte Quarte (1.333) für fast alle Fälle. Wenn Sie unsicher sind, beginnen Sie mit 1.25. Sie können den Wert jederzeit erhöhen, wenn die Hierarchie zu flach wirkt.

Die Skala im praktischen Einsatz: Große Terz ab 16px

Hier ist ein vollständiger große Terz-Skala (Verhältnis = 1.25, Basis = 16px) über sieben Schritten:

px-Wert

Schritt	Multiplikator	rem-Wert	xs
10.24px	1.25^-2	0.64rem	sm
12.8px	1.25^-1	0.8rem	base
1rem	1.25^0	16px	lg
1.25rem	1.25^1	20px	xl
25px	1.25^2	1.5625rem	2xl
31.25px	1.25^3	1.953rem	3xl
39.06px	1.25^4	2.441rem	Ein Hinweis zu den Dezimalwerten:

sind völlig in Ordnung, um genau in rem zu behalten — Browser handeln die subpixelige Rendern korrekt. Sie müssen nicht auf 12.8px und 31.25px runden und die mathematische Konsistenz brechen. Halten Sie die Mathematik sauber; lassen Sie den Browser seine Arbeit erledigen. 13px oder 31px CSS-Standard-Eigenschaften: Ihr Design-Token-System

Übersetzen Sie die Skala direkt in CSS-Standard-Eigenschaften. Damit erhalten Sie ein Design-Token-System, das überall in Ihrem Codebasis leicht verarbeitet werden kann — und später leicht ersetzt werden kann, wenn Sie das Verhältnis ändern:

Dann verwenden Sie sie wie jedes Design-Token:

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

Der Vorteil gegenüber festgelegten Werten: Wenn ein Designer entscheidet, dass das Verhältnis 1.333 anstatt 1.25 sein soll, werden sieben Zahlen an einem Ort aktualisiert. Jeder Komponente wird automatisch aktualisiert. Designsysteme, die diesen Schritt überspringen, enden mit fünfzig verschiedenen Schriftgröße-Werten, die über verschiedene Komponentenverzeichnisse verteilt sind — und jedes Entwickler-Team fügt seine eigenen hinzu. Entwickler und Design-Token haben eine komplizierte Beziehung, aber diese ist die Version, die tatsächlich funktioniert.

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

Wenn Sie nicht manuell die Werte berechnen möchten, bietet das

Ihnen die Möglichkeit, eine Basisgröße und ein Verhältnis auszuwählen und die volle Skala sofort zu erhalten — mit CSS-Standard-Eigenschaften, die sofort kopiert werden können. Schriftgröße-Modulskalengenerator Wann die Skala verlassen wird

Skalen sind Werkzeuge, nicht Gesetze. Hier sind Fälle, in denen Sie absichtlich abweichen:

Anzeigetext benötigt eine separate Behandlung

Die meisten Designsysteme verwenden zwei Skalen: eine enge Verhältnis (1.25 oder 1.333) für Körpertext und UI-Komponenten und eine dramatischere (1.5 oder 1.618) für Anzeigetext. Der Hauptüberschrift auf einer Marketingseite braucht nicht die gleiche Fortschrittsgeschichte wie eine Beschriftung in einem Formular. Tailwinds Standard-Skala macht genau das — engere Schritte bei kleineren Größen, größere Sprünge bei Anzeigegrößen.

Fluide Typografie glättet die Übergänge

Auf einem mobilen Bildschirm wird ein Verhältnis von 1.5, das auf einem Desktop gut aussah, zu kleinen oder zu großen Überschriften führen. Die moderne Lösung ist

Dies behält die modulare Skalawerte als Ihre Mindest- und Maximalwerte als Anchors, lässt jedoch die Größe flüssig zwischen diesen Werten basierend auf der Bildschirmbreite variieren. Die modulare Skala definiert den Bereich; clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

behandelt die Übergänge. Die Mathematik bleibt konsistent, die Ausgabe bleibt lesbar über verschiedene Bildschirmgrößen. clamp() Kontextuelle Überschreitungen sind in Ordnung

Wenn Ihr

in einer Seitenleiste zu groß erscheint, kann es auf h2 gebracht werden. Das ist eine legitime Entscheidung. Die Skala bietet Ihnen ein kohärentes Standardverhalten, nicht ein unveränderliches Gesetz. Das Ziel ist visuelle Harmonie, nicht mathematische Perfektion. Brechen Sie die Skala, wenn der Kontext es erfordert — aber tun Sie es bewusst, nicht weil Sie eine gerundete Zahl genommen haben. 1.953remWählen Sie eine Basisgröße (meistens 16px), wählen Sie ein Verhältnis, das dem gewünschten visuellen Gewicht entspricht (1.25 für UI, 1.333 für etwas mit etwas mehr Präsenz, 1.5 für editorial), generieren Sie die Skala und schreiben Sie sie als CSS-Standard-Eigenschaften. Fertig. Ihre Schriftgrößen haben nun eine mathematische Beziehung anstatt eine willkürliche. 1.5625rem on IO Tools ermöglicht es Ihnen, Basisgröße, Verhältnis und Anzahl der Schritte zu konfigurieren — und gibt Ihnen die CSS-Code, der sofort kopiert werden kann. Versuchen Sie, das Verhältnis von 1.25 auf 1.333 zu ändern und beobachten Sie, wie schnell die Überschriftengrößen sich verändern. Das ist die Intuition, die Sie aufbauen sollten: das Verständnis, wie jedes Verhältnis

Alles zusammenführen

sich anfühlt

Der Schriftgröße-Modulskalengenerator bevor Sie es in ein Designsystem einbinden. Modular Type Scale — Die Mathematik hinter jeder Designsystems Schriftgröße 2 Modular Type Scale — Die Mathematik hinter jeder Designsystems Schriftgröße 1

Das könnte Ihnen auch gefallen