Was ist eine modulare Schriftgrößenskala?

Eine modulare Schriftgrößenskala — oft einfach zu modularer Skala verkürzt — ist ein kleiner, fester Satz an Schriftgrößen, bei dem jede Größe aus einer Basisgröße abgeleitet wird, die mit einem konstanten Verhältnis multipliziert wird. Statt Größen nach Augenmaß zu wählen, triffst du zwei Entscheidungen — eine Basis (meist 16px) und ein Verhältnis (etwa 1,333) — und eine Formel erzeugt jede weitere Größe. Das Ergebnis ist ein Typografie-System, in dem Größen mathematisch statt zufällig zueinander in Beziehung stehen.

Viele moderne Design-Systeme organisieren ihre Typografie um irgendeine Form von Skala, und die modulare Skala ist die häufigste Form. Die Idee hat tiefe Wurzeln in der Print-Typografie und wurde vor allem durch Tim Browns Essay More Meaningful Typography auf A List Apart in die Web-Praxis gebracht. Sie ist eine der ersten Grundlagen, die es sich zu definieren lohnt — neben den Abständen. Dieser Artikel ist Teil unseres Leitfadens zur Schriftgrößenskala.

Wie funktioniert die Formel der Schriftgrößenskala?

Die klassische Formel lautet:

size(i) = base × ratio^i

wobei i die Schrittnummer ist — positive Schritte gehen von der Basis nach oben, negative Schritte nach unten. Mit einer Basis von 16px und einem Verhältnis von 1,333 (einer “reinen Quarte”) sieht die Skala so aus:

Eine Konsequenz lässt sich in der Tabelle leicht übersehen: Jeder Sprung zwischen den Ebenen ist proportional gleich groß. Ein h2 verhält sich zu einem h3 im selben Verhältnis wie ein h3 zum Fließtext (in der Praxis werden Größen gerundet, aber die Beziehung bleibt bestehen).

Diese proportionale Konsistenz ist es, die eine Seite komponiert statt zusammengestückelt wirken lässt. Menschen sind bemerkenswert gut darin, Proportionen wahrzunehmen, selbst wenn sie sie nicht benennen können — dieselbe Fähigkeit, die hört, wenn ein Akkord verstimmt ist. Eine konsistente Skala senkt außerdem das visuelle Rauschen der Seite: Wenn jede Größenbeziehung eine Instanz eines einzigen Verhältnisses ist, muss das Auge nur eine Regel in Einklang bringen statt eines Dutzends willkürlicher.

Wie wählst du ein Verhältnis?

Das Verhältnis steuert, wie dramatisch die Größensprünge ausfallen, und der richtige Wert hängt davon ab, wie textdicht dein Produkt ist:

• 1,125–1,25 (große Sekunde bis große Terz): subtile Schritte. Am besten für dichte Produkt-UIs — Dashboards, Tabellen, Einstellungsbildschirme — bei denen du viele nutzbare Größen dicht beieinander brauchst.
• 1,333–1,414 (reine Quarte bis übermäßige Quarte): klare Hierarchie ohne Drama. Der zuverlässige Allrounder für Marketing- und Content-Seiten.
• 1,5–1,618 (reine Quinte bis Goldener Schnitt): große, ausdrucksstarke Sprünge. Funktioniert für redaktionelle Layouts und Landingpages mit kurzem Text; verschwenderisch für UIs, weil die oberen Schritte schnell riesig werden.

Eine nützliche Faustregel: Je mehr Text deine Oberfläche trägt, desto kleiner dein Verhältnis.

Was sind “Noten”, und warum reichen reine Verhältnisse nicht aus?

Hier ist das Problem, auf das jedes Team mit der reinen Formel stößt: Die Lücken sind genau dort zu groß, wo du Präzision brauchst. Mit Basis 16 und Verhältnis 1,333 gibt es nichts zwischen 16px und 21px — aber echte Oberflächen brauchen ständig eine Größe von 18px (ein Einleitungsabsatz, ein großes Button-Label).

Eine hilfreiche Analogie kommt aus der Musik. Eine Oktave springt nicht von einem C zum nächsten — sie ist in Noten unterteilt. Eine Schriftgrößenskala lässt sich genauso unterteilen:

size(i) = base × ratio^(i/notes)

Mit notes = 2 erhält jeder Verhältnissprung einen Zwischenschritt: 16, 18, 21, 25, 28… Die Zwischengrößen liegen weiterhin auf der Skala — sie sind Halbschritte, keine Ausnahmen — sodass die proportionale Konsistenz erhalten bleibt, während die Skala dicht genug wird, um tatsächlich nutzbar zu sein.

Sieh es dir live an: öffne genau diese Skala im Scale Composer — reine Quarte, 16px-Basis, 2 Noten pro Intervall. Zieh am Verhältnis und beobachte, wie sich jede Ebene neu berechnet.

Warum ist eine Skala besser als handverlesene Größen?

Vier praktische Gründe:

1. Weniger Entscheidungen. Jede Debatte über “sollte das 17 oder 18px sein?” verschwindet — was nicht auf der Skala liegt, ist keine Größe.
2. Schutz vor Drift. Handverlesene Systeme sammeln Größen an. Prüfe eine beliebige gereifte Codebase, und du findest wahrscheinlich 14, 15, 16, 17 und 18px alle in Produktion, die denselben Job machen. Eine Skala macht diese Art von Entropie deutlich schwerer einzuführen.
3. Benennbare Tokens. Ein endlicher Satz an Größen lässt sich sauber auf Typografie-Tokens abbilden (heading-lg, body-md), die Design und Code teilen können — und es werden weniger Größen benötigt, als die meisten Teams erwarten.
4. Eine gemeinsame Progression. Dieselbe Basis und dasselbe Verhältnis können mehr als nur Schrift steuern: am häufigsten die Abstands-Schritte, und manche Systeme nutzen sogar dieselbe Progression, wenn sie Farbrampen erzeugen — sodass das Ändern einer einzigen Zahl das System konsistent nachstimmt.

Wo passt die Zeilenhöhe hinein?

Eine Skala für Größen löst die eine Hälfte der Typografie; die andere Hälfte ist die vertikale. Eine gängige Konvention ist, eine Grundlinien-Einheit von der Hälfte der Basisgröße abzuleiten (8px bei einer 16px-Basis) und jede Zeilenhöhe als ganzes oder halbes Vielfaches davon festzulegen: Fließtext 16px auf einer 24px-Zeile (3 Grundlinien), h2 38px auf 48px (6 Grundlinien). Der Text landet dann auf einem gemeinsamen Rhythmus statt auf willkürlichen Werten pro Element — demselben Rhythmus, auf dem das Abstands-System aufbauen kann.

Probier es mit deinen eigenen Zahlen

Der schnellste Weg, eine modulare Skala zu verstehen, ist, eine kaputtzumachen: öffne dieselbe Skala mit vier Noten pro Intervall und beobachte, wie die Skala dichter wird, ohne ihre Proportionen zu verlieren — setz sie dann zurück auf zwei, erhöhe das Verhältnis auf 1,5 und sieh genau, wann die oberen Schritte aufhören, nutzbar zu sein. Deine Fließtext-Größe und dein dichtester UI-Moment verraten dir dein Verhältnis schneller als jede Tabelle.