Aktualisiert 10. Juli 2026

Schriftgrößenskala: Der praktische Leitfaden

Eine Schriftgrößenskala ist eine begrenzte, geordnete Menge von Schriftgrößen, die aus zwei Entscheidungen entsteht — einer Basisgröße und einem Verhältnis — statt aus einzeln ausgewählten Größen. Jede Größe auf der Skala steht im selben Verhältnis zu jeder anderen, und genau das lässt eine Seite komponiert statt zusammengestückelt wirken. Dieser Hub sammelt unsere Leitfäden zum Wählen, Aufbauen und Nutzen von Schriftgrößenskalen; den schnellsten Überblick bekommst du, wenn du eine funktionierende Skala in Scale Composer öffnest und am Verhältnis ziehst.

Beginne mit dem Verhältnis

Das Verhältnis ist die Persönlichkeit deiner Typografie: kleine Verhältnisse (1,125–1,25) erzeugen subtile, dichte Hierarchien für Produkt-UIs; der mittlere Bereich (1,333–1,414) trägt Content-Seiten mühelos; große Verhältnisse (1,5–1,618) erzeugen eine dramatische, redaktionelle Hierarchie, die Platz schnell verbraucht. Die Artikel unten gehen die Abwägungen durch, samt einem ehrlichen Blick auf den berühmten Goldenen Schnitt — wo 1,618 seinen Ruf verdient und wo er deine obersten Stufen verschwendet.

Dass ein einzelnes Verhältnis komponiert wirkt, ist perzeptiv begründet, nicht mathematisch: Wenn jeder Sprung zwischen den Größen dasselbe Verhältnis hat, lernt das Auge die Beziehung einmal und hört auf, neu zu messen — Hierarchie registriert sich, bevor das Lesen beginnt. Einzeln ausgewählte Größen tragen kein gemeinsames Signal, weshalb Ad-hoc-Typografie unruhig wirkt, selbst wenn jede einzelne Größe für sich betrachtet vernünftig aussieht.

Noten: der Teil, den die meisten Skalen-Rechner überspringen

Eine reine Verhältnisfolge lässt genau dort Lücken, wo Interfaces Präzision brauchen — nichts zwischen 16px und 21px, doch ein Lead-Absatz will 18. Teilt man jedes Verhältnisintervall in Noten auf — so wie sich eine Oktave in Noten teilt —, entstehen Zwischengrößen, die trotzdem zur Skala gehören. Das ist der Unterschied zwischen einer Skala, die du bewunderst, und einer Skala, die du tatsächlich ausliefern kannst.

Das Vokabular ist bewusst aus der Musik geliehen — Musikalische Intervalle in der Typografie erklärt, was Noten in einer Skala leisten und warum die Analogie trägt. Noten bedeuten aber nicht mehr benannte Größen: Wie viele Schriftgrößen braucht ein Design-System? argumentiert, dass die Antwort auch bei verfügbaren Zwischengrößen bei rund neun bis zwölf bleibt, weil jede benannte Größe eine sichtbare Entscheidung sein sollte statt ein Nebenprodukt der Mathematik.

Eine Skala, das ganze System

Dieselbe Basis und dasselbe Verhältnis, die deine Schriftgrößen erzeugen, können mehr erzeugen: eine Grundlinien-Einheit von der halben Basis für Zeilenhöhen, die Abstände-Stufen deines Abstände-Systems und Raster-Maße, die dieselbe Progression durchlaufen. Bei der Typografie beginnt die Skala meist, aber der Nutzen verstärkt sich, wenn der Rest des Systems sie teilt — ändere eine Zahl, und alles stimmt sich gemeinsam neu ab.

Das ist die Prämisse von Scale Composer: Eine Skala steuert Typografie, Farbe, Abstände und Raster und exportiert sie zusammen. Der Hub Layout-Raster behandelt die Spalten-Seite dieses Systems; und wenn sich die Größen auch zwischen Viewports anpassen sollen, zeigt Fluid-Typografie, wie dieselbe Skala mit CSS clamp() interpolieren kann, statt an Breakpoints zu springen.

Wo du anfangen solltest zu lesen

Wenn das Konzept neu ist, beginne mit Was ist eine modulare Schriftgrößenskala? — es entwickelt die Kernidee aus einem durchgerechneten Beispiel. Danach legst du die zwei Eingaben fest: Warum 16px die Standard-Basis-Schriftgröße ist behandelt die Basis, und die Verhältnis-Leitfäden oben behandeln den Multiplikator. Sind die festgelegt, übernehmen die Anwendungs-Leitfäden: Überschriftengrößen bildet die Skala auf h1–h6 ab, Zeilenhöhe: Die Grundlinienraster-Methode erweitert sie zum vertikalen Rhythmus, und rem vs. px vs. em behandelt die Einheiten, in denen die Skala ausgeliefert wird. 7 Fehler bei Schriftgrößenskalen dient als abschließende Checkliste, die du gegen das gerade gebaute System laufen lässt.

Leitfäden in diesem Hub

Probier es aus, bevor du weiterliest

Theorie bleibt besser mit deinen eigenen Zahlen hängen: öffne eine dichte Produkt-UI-Skala — Verhältnis 1,2, die Sorte, die zu Dashboards passt — und erhöhe dann das Verhältnis Richtung 1,5 und sieh zu, wie dieselben fünf Ebenen redaktionell werden. Zehn Sekunden Ziehen erklären die Verhältnis-Tabelle besser als jede Prosa.

Häufige Fragen

Was ist ein gutes Verhältnis für eine Schriftgrößenskala?

Das hängt davon ab, wie textdicht dein Produkt ist. Verhältnisse zwischen 1,2 und 1,333 passen zu dichten Produkt-UIs, wo viele nutzbare Größen nah beieinander liegen müssen; 1,414 und höher passt zu redaktionellen Layouts und Landingpages mit wenigen Hierarchieebenen und kurzem Text.

Was ist die beste Basis-Schriftgröße?

16px ist die Browser-Voreinstellung und eine sinnvolle Untergrenze für Fließtext auf Bildschirmen. Leselastige Seiten fahren mit 18px oft besser. Was du auch wählst, die Basis verankert alles Übrige — sowohl die Größen als auch die Grundlinie leiten sich daraus ab.

Wie viele Schriftgrößen sollte ein Design-System haben?

Weniger, als die meisten Teams erwarten — etwa 9 bis 12 benannte Ebenen (Caption, Fließtext-Größen, Überschriftenebenen, Display) decken eine große Bandbreite von Produkten ab. Eine Skala hilft, indem sie jede zusätzliche Größe zu einer sichtbaren Entscheidung macht statt zu stiller Drift.

Was ist eine modulare Skala in der Typografie?

Eine kleine, feste Menge von Schriftgrößen, die aus einer Basisgröße multipliziert mit einem konstanten Verhältnis entsteht, sodass jede Größe mathematisch mit jeder anderen zusammenhängt. Teilt man jeden Verhältnisschritt in "Noten" auf — so wie sich eine Oktave in Noten teilt —, ergeben sich nutzbare Zwischengrößen für die Skala.

Sollte die Zeilenhöhe ebenfalls auf einer Skala liegen?

Ja — eine verbreitete Konvention leitet eine Grundlinien-Einheit von der halben Basisgröße ab (8px bei einer 16px-Basis) und legt jede Zeilenhöhe als Vielfaches davon fest. Der Text teilt sich dann einen vertikalen Rhythmus statt einzelner Werte pro Element.

Sollten Schriftgrößen px, rem oder em verwenden?

rem für Schriftgrößen im Code. Es skaliert mit der Browser-Voreinstellung der Nutzerin, was px ignoriert — und wenn deine Skala auf einer 16px-Basis definiert ist, bilden sich die rem-Werte direkt darauf ab.